精致的装修公司中英文导航（一级导航）

程序员文章站 2022-06-22 11:55:51

效果图 index.html index

效果图

精致的装修公司中英文导航（一级导航）

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<!-- 导航nav -->
<div id="bg">
    <div id="container">
        <ul id="nav">
        <li><a class="cur" href="#">品牌<span>brand</span></a></li>
        <li><a href="#">概况<span>overview</span></a></li>
        <li><a href="#">价值<span>worth</span></a></li>
        <li><a href="#">配套<span>support</span></a></li>
        <li><a href="#">户型<span>unit</span></a></li>
        <li><a href="#">精装<span>hardcover</span></a></li>
        <li><a href="#">动态<span>news</span></a></li>
        </ul>
        <div id="buoy"></div>
    </div>
</div>
<div style="text-align:center;clear:both"><br><br><br><br></div>

<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/script.js"></script>
<script>
    $.nicenav(300);
</script>

</body>
</html>

style.css

* {
  margin:0;
  padding:0
}
#bg{
  background-color: rgb(102, 132, 228);
  padding:20px;
}
#container {
  width:945px;
  height:34px;
  position:relative;
  overflow:hidden;
  margin:auto;
  font-family:microsoft yahei,segoe ui,tahoma,arial,verdana,sans-serif
}
#container li {
  display:block;
  float:left;
  width:133px;
  height:32px;
  background:url(../images/transparent.png);
  line-height:32px;
  padding-right:2px;
  line-height:32px;
  list-style:none
}
#container li a {
  color:#fff;
  text-decoration:none;
  display:block;
  position:relative;
  background:url(../images/black.png);
  width:123px;
  height:32px;
  padding-right:10px;
  font-size:14px;
  font-weight:700;
  text-align:right
}
#container li a:hover,#container li a.cur {
  background:#222
}
#container li a span {
  display:block;
  position:absolute;
  left:10px;
  top:0;
  font-weight:400;
  font-size:10px;
  -webkit-text-size-adjust:none;
  opacity:.6;
  filter:alpha(opacity=60)
}
#buoy {
  position:absolute;
  width:133px;
  height:2px;
  background:#e9d008;
  bottom:0;
  left:-157px
}

script.js

; (function($) {
    $.extend({
        'nicenav': function(con) {
            con = typeof con === 'number' ? con: 400;
            var $lis = $('#nav>li'),
            $h = $('#buoy') 
            $lis.hover(function() {
                $h.stop().animate({
                    'left': $(this).offsetparent().context.offsetleft
                },
                con);
            },
            function() {
                $h.stop().animate({
                    'left': '-157px'
                },
                con);
            })
        }
    });
} (jquery));

上一篇：荐 jQuery文档阅读笔记自整理——1.6w字笔记

下一篇：简单推算冒泡排序和选择排序