请帮我添加一个简易动画到这个HTML导航菜单

时间：2014-05-09 12:30:13

标签： html css nav

好的，所以我需要像本网站上的导航一样轻松：http://candpgeneration.com/toys/CSS3-dropdown-tut.php  使用此代码：

HTML：

<!DOCTYPE html>

<html lang="en">
<head>

    <link rel="stylesheet" href="/theme/css/_reset.css" />
    <link rel="stylesheet" href="main.css" />
</head>

<body>
<nav id="nav" role="navigation">
    <a href="#nav" title="Show navigation">Show navigation</a>
    <a href="#" title="Hide navigation">Hide navigation</a>
    <ul class="clearfix">
        <li><a href="?home">Home</a></li>
        <li class="active">
            <a href="?blog" aria-haspopup="true"><span>Blog</span></a>
            <ul>
                <li><a href="?design">Design</a></li>
                <li><a href="?html">HTML</a></li>
                <li><a href="?css">CSS</a></li>
                <li><a href="?javascript">JavaScript</a></li>
            </ul>
        </li>
        <li>
            <a href="?work" aria-haspopup="true"><span>Work</span></a>
            <ul>
                <li><a href="?webdesign">Web Design</a></li>
                <li><a href="?typography">Typography</a></li>
                <li><a href="?frontend">Front-End</a></li>
            </ul>
        </li>
        <li><a href="?about">About</a></li>
    </ul>
</nav>
</body>

</html>

CSS：

html
{
    font-size: 100%;
}

body
{
    font-family: 'Noticia Text', serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, a, a:hover
{
    color: #111;
}

a
{
    -webkit-transition: color .3s ease;
    -moz-transition: color .3s ease;
    -ms-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
}

a, a:hover
{
    text-decoration: none;
}

*, *:before, *:after
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
    -webkit-overflow-scrolling: touch;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s,
samp, small, strike, strong, sup, sub, tt, var, b, u, i, center,
ul, ol, li, dl, dt, dd,
table, tr, th, td, thead, tbody, tfoot, caption,
form, fieldset, legend, input, button, textarea, select, label,
applet, object, iframe, audio, video, canvas,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary
{
    font-size: 100%;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

html
{
    font-size: 100%;
    font-size-adjust: auto;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body
{
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1;
    color: #000;
    background-color: #fff;
}

body
{
    background-color: #f7efeb;
    padding: 1.25em; /* 20 */
}

#nav
{
    width: 60em; /* 1000 */
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -30em; /* 30 480 */
}

#nav > a
{
    display: none;
    -webkit-transition: height 0.7s ease-in;
    -moz-transition: height 0.7s ease-in;
    -o-transition: height 0.7s ease-in;
    -ms-transition: height 0.7s ease-in;
    transition: height 0.7s ease-in;
}

#nav li
{
    position: relative;
}

#nav li a
{
    color: #fff;
    display: block;
}

#nav li a:active
{
    background-color: #c00 !important;
}

#nav span:after
{
    width: 0;
    height: 0;
    border: 0.713em solid transparent; /* 5 */
    border-bottom: none;
    border-top-color: #efa585;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.713em; /* 5 */
}

/* first level */

#nav > ul
{
    height: 3.75em; /* 60 */
    background-color: #e15a1f;
}

#nav > ul > li
{
    width: 25%;
    height: 100%;
    float: left;
}

#nav > ul > li > a
{
    height: 100%;
    font-size: 1.5em; /* 24 */
    line-height: 2.5em; /* 60 (24) */
    text-align: center;
}

#nav > ul > li:not( :last-child ) > a
{
    border-right: 1px solid #cc470d;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
    background-color: #cc470d;
}

/* second level */
#nav li ul
{
    background-color: #cc470d;
    display: none;
    position: absolute;
    top: 100%;
}

#nav li:hover ul
{
    display: block;
    left: 0;
    right: 0;
}

#nav li:not( :first-child ):hover ul
{
    left: -1px;
}

#nav li ul a
{
    font-size: 1.25em; /* 20 */
    border-top: 1px solid #e15a1f;
    padding: 0.75em; /* 15 (20) */
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
    background-color: #e15a1f;
}

@media only screen and ( max-width: 62.5em ) /* 1000 */
{
    #nav
    {
        width: 100%;
        position: static;
        margin: 0;
    }
}

@media only screen and ( max-width: 40em ) /* 640 */
{
    html
    {
        font-size: 75%; /* 12 */
    }

    #nav
    {
        position: relative;
        top: auto;
        left: auto;
    }

    #nav > a
    {
        width: 3.125em; /* 50 */
        height: 3.125em; /* 50 */
        text-align: left;
        text-indent: -9999px;
        background-color: #e15a1f;
        position: relative;
    }

    #nav > a:before,
    #nav > a:after
    {
        position: absolute;
        border: 2px solid #fff;
        top: 35%;
        left: 25%;
        right: 25%;
        content: '';
    }

    #nav > a:after
    {
        top: 60%;
    }

    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: block;
    }

    /* first level */
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }

    #nav:target > ul
    {
        display: block;
    }

    #nav > ul > li
    {
        width: 100%;
        float: none;
    }

    #nav > ul > li > a
    {
        height: auto;
        text-align: left;
        padding: 0 0.833em; /* 20 (24) */
    }

    #nav > ul > li:not( :last-child ) > a
    {
        border-right: none;
        border-bottom: 1px solid #cc470d;
    }

    /* second level */
    #nav li ul
    {
        position: static;
        padding: 1.25em; /* 20 */
        padding-top: 0;
   }

我是新的，所以请耐心等待，感谢您提前提供任何帮助

2 个答案:

答案 0 :(得分：0)

选中Fiddle。

<div class="navigation">
        <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Design</a></li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </li>
            <li><a href="#">Work</a>
                <ul>
                     <li><a href="#">Web Design</a></li>
                     <li><a href="#">Typography</a></li>
                     <li><a href="#">Typography</a></li>
                </ul>
            </li>
            <li><a href="#">A Time</a></li>
            <li><a href="#">Last Night</a></li>
        </ul>
</div>

相应地添加课程。

答案 1 :(得分：0)

我认为这就是你要找的here 

html {
 font-size: 100%;
}
body {
 font-family:'Noticia Text', serif;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
body, a, a:hover {
 color: #111;
}
a {
 -webkit-transition: color .3s ease;
 -moz-transition: color .3s ease;
 -ms-transition: color .3s ease;
 -o-transition: color .3s ease;
 transition: color .3s ease;
}
a, a:hover {
 text-decoration: none;
}
*, *:before, *:after {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 -webkit-overflow-scrolling: touch;
}
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,      cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sup, sub,  tt, var, b, u, i, center, ul, ol, li, dl, dt, dd, table, tr, th, td, thead, tbody, tfoot, caption, form, fieldset, legend, input, button, textarea, select, label, applet, object, iframe, audio, video, canvas, article, aside, canvas, details, figcaption, figure, footer,  header, hgroup, menu, nav, section, summary {
 font-size: 100%;
 font-family: inherit;
 font-weight: inherit;
 font-style: inherit;
 line-height: inherit;
 vertical-align: baseline;
 border: 0;
 outline: 0;
 padding: 0;
 margin: 0;
}
html {
 font-size: 100%;
 font-size-adjust: auto;
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
 -ms-text-size-adjust: 100%;
 -o-text-size-adjust: 100%;
 text-size-adjust: 100%;
}
body {
 font-family: Helvetica, Arial, sans-serif;
 line-height: 1;
 color: #000;
 background-color: #f7efeb;
 padding: 1.25em;
}
#nav {
 width: 60em;
 /* 1000 */
 font-family:'Open Sans', sans-serif;
 font-weight: 400;
 position: absolute;
 top: 25%;
 left: 50%;
 margin-left: -30em;
 /* 30 480 */
}
#nav > a {
 display: none;
 -webkit-transition: height 0.7s ease-in;
 -moz-transition: height 0.7s ease-in;
 -o-transition: height 0.7s ease-in;
 -ms-transition: height 0.7s ease-in;
 transition: height 0.7s ease-in;
}
#nav li {
 position: relative;
}
#nav li a {
 color: #fff;
 display: block;
}
#nav li a:active {
 background-color: #c00 !important;
}
#nav span:after {
 width: 0;
 height: 0;
 border: 0.713em solid transparent;
 /* 5 */
 border-bottom: none;
 border-top-color: #efa585;
 content:'';
 vertical-align: middle;
 display: inline-block;
 position: relative;
 right: -0.713em;
 /* 5 */
}
/* first level */
#nav > ul {
 height: 3.75em;
 /* 60 */
 background-color: #e15a1f;
 list-style: none;
}
#nav > ul > li {
 width: 25%;
 height: 100%;
 float: left;
}
#nav > ul > li > a {
 height: 100%;
 font-size: 1.5em;
 /* 24 */
 line-height: 2.5em;
 /* 60 (24) */
 text-align: center;
}
#nav > ul > li:not(:last-child) > a {
 border-right: 1px solid #cc470d;
}
#nav > ul > li:hover > a, #nav > ul:not(:hover) > li.active > a {
 background-color: #cc470d;
}
/* second level */
#nav li ul {
 background-color: #cc470d;
 height: 0;
 overflow:hidden;
 position: absolute;
 top: 100%;
 list-style: none;
 -webkit-transition: height 0.3s ease-in;
 -moz-transition: height 0.3s ease-in;
 -o-transition: height 0.3s ease-in;
 -ms-transition: height 0.3s ease-in;
 transition: height 0.3s ease-in;
}
#nav li:hover ul {
 height: 160px;
 left: 0;
 right: 0;
}
#nav li:not(:first-child):hover ul {
 left: -1px;
}
#nav li ul a {
 font-size: 1.25em;
 /* 20 */
 border-top: 1px solid #e15a1f;
 padding: 0.75em;
 /* 15 (20) */
}
#nav li ul li a:hover, #nav li ul:not(:hover) li.active a {
 background-color: #e15a1f;
}
@media only screen and (max-width: 62.5em)
/* 1000 */
 {
 #nav {
  width: 100%;
  position: static;
  margin: 0;
 }
}
@media only screen and (max-width: 40em)
/* 640 */
{
 html {
    font-size: 75%;
    /* 12 */
}
#nav {
    position: relative;
    top: auto;
    left: auto;
}
#nav > a {
    width: 3.125em;
    /* 50 */
    height: 3.125em;
    /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #e15a1f;
    position: relative;
}
#nav > a:before, #nav > a:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content:'';
}
#nav > a:after {
    top: 60%;
}
#nav:not(:target) > a:first-of-type, #nav:target > a:last-of-type {
    display: block;
}
/* first level */
#nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
}
#nav:target > ul {
    display: block;
}
#nav > ul > li {
    width: 100%;
    float: none;
}
#nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 0.833em;
    /* 20 (24) */
}
#nav > ul > li:not(:last-child) > a {
    border-right: none;
    border-bottom: 1px solid #cc470d;
}

/* second level */
#nav li ul {
    position: static;
    /* 20 */
    padding-top: 0;
}
相关问题
最新问题