零基础建站培训教程介绍

当前位置:

网页制作下拉菜单代码(HTML+CSS+JQUERY)

网页制作时,为了排版的原因,需要制作下拉菜单,下面就来分享一下网页制作下拉菜单代码。(相关教程:网页制作初级入门教程

网页制作下拉菜单

实现上面的下拉菜单,所需的网页制作下拉菜单代码由三部分组成:HTML代码+CSS代码+JQUERY代码

HTML代码(内容可以根据自己需要修改,看不懂HTML代码?可以学习一下html视频教程


<h1>本文介绍网页制作下拉菜单代码,来源:学做网站论坛https://www.xuewangzhan.net/</h1>
<nav>
<ul class="dropdown">
<li class="drop"><a href="#">jQuery</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
<li><a href="#">Adipisci </a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
</ul>
</li>
<li class="drop"><a href="#">jQuery插件库</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
</ul>
</li>
<li class="drop"><a href="#">jQuery特效</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
</ul>
</li>
<li><a href="#">CSS3代码</a> </li>
</ul>
</nav>

CSS代码:


nav{width:550px;margin:1em auto}ul{margin:0;padding:0;list-style:none}ul.dropdown{position:relative;width:100%}ul.dropdown li{font-weight:700;float:left;width:180px;position:relative;background:#ecf0f1}ul.dropdown a:hover{color:#000}ul.dropdown li a{display:block;padding:20px 8px;color:#34495e;position:relative;z-index:2000;text-align:center;text-decoration:none;font-weight:300}ul.dropdown li a:hover,ul.dropdown li a.hover{background:#3498db;position:relative;color:#fff}ul.dropdown ul{display:none;position:absolute;top:0;left:0;width:180px;z-index:1000}ul.dropdown ul li{font-weight:400;background:#f6f6f6;color:#000;border-bottom:1px solid #ccc}ul.dropdown ul li a{display:block;color:#34495e!important;background:#eee!important}ul.dropdown ul li a:hover{display:block;background:#3498db!important;color:#fff!important}.drop>a{position:relative}.drop>a:after{content:"";position:absolute;right:10px;top:40%;border-left:5px solid transparent;border-top:5px solid #333;border-right:5px solid transparent;z-index:999}.drop>a:hover:after{content:"";border-left:5px solid transparent;border-top:5px solid #fff;border-right:5px solid transparent}

JQUERY代码:


<script src='http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js'></script>
<script>
var maxHeight=400;$(function(){$(".dropdown > li").hover(function(){var $container=$(this),$list=$container.find("ul"),$anchor=$container.find("a"),height=$list.height()*1.1,multiplier=height/maxHeight;$container.data("origHeight",$container.height());$anchor.addClass("hover");$list.show().css({paddingTop:$container.data("origHeight")});if(multiplier>1){$container.css({height:maxHeight,overflow:"hidden"}).mousemove(function(e){var offset=$container.offset();var relativeY=((e.pageY-offset.top)*multiplier)-($container.data("origHeight")*multiplier);if(relativeY>$container.data("origHeight")){$list.css("top",-relativeY+$container.data("origHeight"));};});}},function(){var $el=$(this);$el.height($(this).data("origHeight")).find("ul").css({top:0}).hide().end().find("a").removeClass("hover");});});

</script>

通过使用上面三个部分组成的网页制作下拉菜单代码,就可以实现网页的下拉菜单功能了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关教程

学做网站论坛零基础学建网站课程