当前位置： 移动技术网 > IT编程>开发语言>Jquery > 精致的装修公司中英文导航（一级导航）

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

2020年05月08日  | 移动技术网IT编程  | 我要评论

效果图

 

<!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));

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网