jQ+css3平滑二级下拉导航jQuery+css3平滑二级下拉导航网页特效.zip资源-CSDN文库

共2个文件

html：1个

css：1个

版权申诉

javascript

jQuery

html5

116 浏览量 2022-11-19 19:46:28 上传评论收藏 3KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQ+css3平滑二级下拉导航 jQuery+css3平滑二级下拉导航网页特效.zip （2个子文件）

jQ+css3平滑二级下拉导航 jQuery+css3平滑二级下拉导航网页特效

jiaoben1096

css

style.css 3KB

index.html 2KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+css3平滑二级下拉导航 - 网页模板</title> <link rel="Stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { //We initially hide the all dropdown menus $('#dropdown_nav li').find('.sub_nav').hide(); //When hovering over the main nav link we find the dropdown menu to the corresponding link. $('#dropdown_nav li').hover(function() { //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn. $(this).find('.sub_nav').fadeIn(100); }, function() { //Do the same again, only fadeOut this time. $(this).find('.sub_nav').fadeOut(50); }); }); </script> </head> <body> <h2></h2> <ul id="dropdown_nav"> <li><a class="first" href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul class="sub_nav"> <li><a href="#">Photoshop #1</a></li> <li><a href="#">Photoshop #2</a></li> <li><a href="#">Photoshop #3</a></li> <li><a href="#">Photoshop #4</a></li> </ul> </li> <li><a href="#">Artciles</a> <ul class="sub_nav"> <li><a href="#">Announcements #1</a></li> <li><a href="#">Announcements #2</a></li> <li><a href="#">Announcements #3</a></li> <li><a href="#">Announcements #4</a></li> </ul> </li> <li><a href="#">Freebies</a> </li> <li><a class="last" href="#">Other Stuff</a> <ul class="sub_nav"> <li><a href="#">Other Stuff #1</a></li> <li><a href="#">Other Stuff #2</a></li> <li><a href="#">Other Stuff #3</a></li> <li><a href="#">Other Stuff #4</a></li> </ul> </li> </ul> <br /> <div style="text-align:center;clear:both"> <p>适用浏览器：FireFox、Chrome、Safari、傲游、搜狗. 不支持IE8、360、Opera、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉