欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

精致的装修公司中英文导航(一级导航)

程序员文章站 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));