navgation

最新推荐文章于 2024-02-24 23:14:04 发布

原创最新推荐文章于 2024-02-24 23:14:04 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

html5，css3 专栏收录该内容

5 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <title>navigation</title>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="text/css" href="ico/icow.ico">
    <link rel="stylesheet" href="fontawesome-4.2.0/4.2.0/css/font-awesome.css">
    <link rel="stylesheet" href="slider.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="example">
        <div id="line-can">
            <ul id="navigation">
                <li><a href="https://www.baidu.com/"><span class="fa fa-th-large">Home</span></a></li>
                <li><a href=""><span class="fa fa-heart-o">My hobby</span></a>
                    <div>
                        <ul>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;html</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;css</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;javascript</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;jquery</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;ajax</span></a></li>
                        </ul>
                    </div>
                </li>
                <li><a href=""><span class="fa fa-desktop">Work</span></a>
                    <div>
                        <ul>
                      <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;design</span></a></li>
                      <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;thinking</span></a></li>
                      <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;inspiration</span></a></li>
                      <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;efficiency</span></a></li>
                      <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;englis</span></a></li>
                        </ul>
                    </div>
                </li>
                <li><a href=""><span class="fa fa-music">music</span></a>
                    <div>
                        <ul>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;kata no kyoukai</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;Recreator</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;Nire</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;Crystal</span></a></li>
                       <li><a href=""><span class="fa fa-chevron-circle-right">&nbsp;BGM</span></a></li>
                        </ul>
                    </div>
                </li>
                <li><a href=""><span class="fa fa-quote-right">Bolg</span></a></li>
                <li><a style="border-right:none;" href=""><span class="fa fa-link">About</span></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

@import "https://fonts.googleapis.com/css?family=Pacifico";
body {
    background-image: url(images/background3.png);
    margin: 0px;
    padding: 0px;
}
.example {
    width: 1000px;
    height: 800px;
    background-color: #424644;
    position: relative;
    margin: -23px 240px;
}
#line-can {
    position: relative;
    width: 800px;
    height: 53px;
    margin: 33px auto;
    background-color: none;
    border-radius: 10px;
    box-shadow: 2px 3px 4px #32363c;
    background-color: #272822;
}
#navigation {
    position: absolute;
    width: 720px;
    height: 51px;
    top:-16px;
    left:22px;
    border-radius: 10px;
    overflow: hidden;
}
#navigation li {
    position: relative;
    z-index: 20;
    width: 112px;
    float: left;
    left:-27px;
    list-style: none;
    border-radius: 10px;
}
#navigation li a {
    list-style: none;
    background-color:#272822; 
    line-height: 35px;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #bea7bf;
    font-family: STHeiti, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    z-index: 30;
    font-weight: bold;
    font-size: 15px;
    width: 151px;
    height: 40px;
    border-radius: 10px;
}
/*make element transtion*/
#navigation ul {
    position: absolute;
    display: inline-block;
    background: #272822;
    top: -250px;
    transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    width: 134px;
    height: 207px;
    border-radius: 10px;
    margin-top: 30px;
    z-index: 3;
    left: 22px;
    box-shadow: 4px 4px 0px #353836;
}
#navigation li:hover ul {
    transform: translate(0, 280px);
}
#navigation li:hover {
    color: rgba(97, 32, 72);
}
#navigation:hover {
    height: 280px;
}
#navigation>li>a {
    line-height: 47px;
    left: 17px;
    padding-left: 25px;
    width: 91px;
    height: 51px;
    border-left: 1px solid #615555;
    border-radius: unset;
}
#navigation li a:hover{
    background-color: #642E64;
}
/*add some fontawesome*/