jquery는 포털 사이트에 적합한 탐색 드롭다운 메뉴 효과 코드를 구현합니다._jquery
- WBOY원래의
- 2016-05-16 15:43:22953검색
이 글의 예시에서는 포털 사이트에 적합한 탐색 드롭다운 메뉴 효과 코드를 jquery로 구현한 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jQuery CSS를 사용하여 작성하고 구현한 웹 탐색 메뉴입니다. 연한 파란색 레이아웃을 채택했으며 전체적인 스타일이 우아하고 신선하며, 좋은 메뉴입니다. 이 기능은 Firefox/IE에서 뛰어난 호환성과 뛰어난 성능을 자랑합니다. 게다가 보조 하위 메뉴가 있는 곳마다 메인 메뉴에 작은 삼각형 로고가 표시되어 사용자 경험도 크게 향상될 것입니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-web-index-nav-menu-codes/
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>经典蓝色横向二级导航栏代码</title>
<style>
body {margin: 0;padding: 0;background: #FFF;font-family: arial,helvetica,sans;}
a {color: #006E97;text-decoration: none;cursor: pointer;cursor: hand;}
a:hover{text-decoration: underline;}
ul {margin:0;padding:0;list-style:none;}
/* Header头部部分 */
#header {float: left;display: inline;width: 100%;min-width: 980px;background: #005774;padding: 0;margin: 0 0 10px 0;height: auto;overflow: visible;}
#masthead {width: 100%;margin: 0 auto 0 auto;clear: both;overflow: visible;height:76px;z-index: 16777267;position:relative;}
#masthead .mast-strip { margin: 0 auto 0 auto;clear: both;overflow: hidden;width: 940px;height:76px;margin-bottom:0;overflow:visible;position:relative;}
#masthead #logo {float: left;width: 221px;height: 45px;padding-right: 15px;background:none;}
#masthead #logo img {margin: 15px 0 0 0;}
/* Nav主菜单部分 */
#dd-navigation {background: url('images/nav-bg.png') repeat-x;clear:both; border-bottom:1px solid #556164;}
#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-right: solid 1px #79dbe1; border-left: solid 1px #0d6b86;}
#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 42px;line-height: 22px;position:relative;z-index: 16777265;border-right: solid 1px #0d6b86;border-left: solid 1px #79dbe1;}
#nav-strip a:hover {text-decoration:none;}
#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 42px;text-align:center;}
#nav-strip ul li.nav-item.active{background-color: #91dce1;background: url('images/nav-hover.png') repeat-x;}
#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: #3DA7C6;}
#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #fff;}
#nav-strip ul li.nav-item.active a{color: #000;}
#nav-strip ul li a{font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 12px;outline:none;}
#nav-strip ul li a .primary-link, #nav-strip ul li.active a .primary-link, #nav-strip ul li.hover a .primary-link{background: url('images/sprite-nav.gif') 100% -10px no-repeat transparent;padding-right: 10px;}
#nav-strip ul li.no-subnav a .primary-link{background: none;padding-right: 0;}
#nav-strip ul li .subnav {display: none;position:absolute;top:43px;left: -1px;padding-bottom: 2px; background:#ceebf2;border:1px #ccc solid;z-index: 16777263;*min-width: 130px;}
#nav-strip .subnav-inner {float: left;*min-width: 130px;}
#nav-strip ul li .subnav ul{float: left;min-width: 130px;margin:0;}
#nav-strip ul li .subnav ul li{display:block;border-left:none;border-right:none;float: none;height: auto;margin: 0 10px;padding: 0; }
#nav-strip ul li .subnav ul.one{width: 130px;margin-bottom: 3px;}
#nav-strip ul li .subnav ul.one li{margin:0;}
#nav-strip ul li .subnav ul.one li a{font-weight: normal;}
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a{font-size: 12px;color: #214181;white-space: nowrap;*white-space: normal;_white-space: nowrap;padding: 5px 20px; text-align:left;height:24px;}
#nav-strip ul li .subnav ul li a,#nav-strip ul li.nav-item:hover .subnav ul li a {white-space: normal;}
#nav-strip ul li .subnav ul li.active a,#nav-strip ul li .subnav ul li a:hover {color: #214181 !important; text-decoration:underline;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div id="masthead">
<div class="mast-strip">
<div id="logo"><a id="logoLink" href="#"></a></div>
</div>
</div>
<div id="dd-navigation">
<div id="nav-strip">
<ul>
<li class="nav-item no-subnav" id="nav-item_1"><a href="#" ><span class="primary-link">首页</span></a>
</li>
<li class="nav-item" id="nav-item_2"><a href="#" ><span class="primary-link">关于我们</span></a>
<div class="subnav " id="subnav_2">
<div class="subnav-inner">
<ul class="one">
<li class=""><a href="#" target="_top">电子商务人才</a></li>
<li class=""><a href="#" target="_top">苏州网站建设</a></li>
<li class=""><a href="#" target="_top">苏州网站推广</a></li>
<li class=""><a href="#" target="_top">导航条代码</a></li>
<li class=""><a href="#" target="_top">网络营销外包</a></li>
<li class=""><a href="#" target="_top">苏州网站制作</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item" id="nav-item_3"><a href="#" ><span class="primary-link">产品展示</span></a>
<div class="subnav " id="subnav_3">
<div class="subnav-inner">
<ul class="one">
<li class=""><a href="#" target="_top">电子商务人才</a></li>
<li class=""><a href="#" target="_top">苏州网站建设</a></li>
<li class=""><a href="#" target="_top">苏州网站推广</a></li>
<li class=""><a href="#" target="_top">导航条代码</a></li>
<li class=""><a href="#" target="_top">网络营销外包</a></li>
<li class=""><a href="#" target="_top">苏州网站制作</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item" id="nav-item_4"><a href="#" ><span class="primary-link">行业资讯</span></a>
<div class="subnav " id="subnav_4">
<div class="subnav-inner">
<ul class="one">
<li class=""><a href="#" target="_top">苏州网站制作</a></li>
<li class=""><a href="#" target="_top">电子商务人才</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item" id="nav-item_5"><a href="#" ><span class="primary-link">工程案例</span></a>
<div class="subnav " id="subnav_5">
<div class="subnav-inner">
<ul class="one">
<li class=""><a href="#" target="_top">苏州网站建设</a></li>
<li class=""><a href="#" target="_top">苏州网站推广</a></li>
<li class=""><a href="#" target="_top">导航条代码</a></li>
<li class=""><a href="#" target="_top">网络营销外包</a></li>
<li class=""><a href="#" target="_top">苏州网站制作</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item no-subnav active" id="nav-item_6"><a href="#" ><span class="primary-link">脚本之家</span></a>
</li>
<li class="nav-item" id="nav-item_7"><a href="#" ><span class="primary-link">联系我们</span></a>
<div class="subnav" id="subnav_7">
<div class="subnav-inner">
<ul class="one">
<li class=""><a href="#" target="_top">导航条代码</a></li>
<li class=""><a href="#" target="_top">网络营销外包</a></li>
<li class=""><a href="#" target="_top">苏州网站制作</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item no-subnav end" id="nav-item_8"><a href="#" ><span class="primary-link">客服中心</span></a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
if (typeof(Reuters) == 'undefined' || Reuters == null) {
Reuters = new Object();
}
if (typeof(Reuters.nav) == 'undefined' || Reuters.nav == null) {
Reuters.nav = new Object();
}
if (typeof(Reuters.info) == 'undefined' || Reuters.info == null) {
Reuters.info = new Object();
}
if (typeof Reuters.info.edition == "undefined") {
Reuters.info.edition = "BETAUS";
}
if (typeof(Reuters.nav.baseUrlPrefix) == 'undefined') {
Reuters.nav.baseUrlPrefix = '';
}
if (typeof(Reuters.nav.PRIMARY_SITE_URL) == 'undefined') {
Reuters.nav.PRIMARY_SITE_URL = 'http://www.baidu.com';
}
if(Reuters.info.edition == 'BETAUS' || Reuters.info.edition == 'US') {
Reuters.nav.PRIMARY_SITE_URL = 'http://www.baidu.com';
} else {
Reuters.nav.PRIMARY_SITE_URL = 'http://'+(Reuters.info.edition).toLowerCase()+'.reuters.com';
}
$("li.nav-item").hover(
function () {
$(this).addClass("hover");
$(this).children(".subnav").stop(true,true).delay(50).slideDown(50, function(){
if($.fn.bgiframe && ($("select").length > 0)){
$(this).bgiframe({opacity: false});
}
});
},function(){
$(this).removeClass("hover");
$(this).children(".subnav").stop(true,true).delay(50).slideUp(50);
});
$('#nav-strip a').click(function() {
var theParent = $(this).closest('.nav-item');
var theParentText= $('a .primary-link', theParent).text();
var linkText = $(this).text();
linkText = (linkText == theParentText)? linkText : theParentText + " - " + linkText;
var destLink = $(this).attr('href');
if (typeof(dcsMultiTrack) == "function") {
dcsMultiTrack('DCSext.DartZone','','DCSext.ModID','','DCSext.ModImp','0','DCSext.VirtualEvent', '1','DCSext.rNavChannel',theParentText,'DCSext.NavSection',linkText,'DCSext.NavURL',destLink,'WT.z_navtest', '1');
}
});
$('#masthead a').click(function() {
var destLink = $(this).attr('href');
if (typeof(dcsMultiTrack) == "function") {
DcsMultiTrack('DCSext.DartZone','','DCSext.ModID','','DCSext.ModImp','0','DCSext.VirtualEvent','1','DCSext.rNavChannel','Other','DCSext.NavURL',destLink,'WT.z_navtest','1');
}
});
$('#editionSwitchTop li').hover(function() {
$(this)
.find('ul')
.stop(true,true);
},function () {
$(this)
.find('ul')
.stop(true, true)
.delay(500)
.slideUp(50);
});
$("#editionSwitchTop li").click(function(event) {
if($(this).find('ul').css('display') == 'none'){
$(this)
.find('ul')
.stop(true, true)
.slideDown(75);
} else if($(this).find('ul').css('display') == 'block'){
$(this)
.find('ul')
.stop(true, true)
.slideUp(50);
}
});
$(document).ready(function() {
$('#editionSwitchFooter li').hover(function() {
$(this)
.find('ul')
.stop(true,true);
},function () {
$(this)
.find('ul')
.stop(true, true)
.delay(500)
.slideUp(50);
});
$(function() {
$("#editionSwitchFooter li").click(function(event) {
if($(this).find('ul').css('display') == 'none'){
$(this)
.find('ul')
.stop(true, true)
.slideDown(75);
} else if($(this).find('ul').css('display') == 'block'){
$(this)
.find('ul')
.stop(true, true)
.slideUp(50);
}
});
});
});
if($("#searchForm").attr("action") == '/search') {
$("#searchForm").attr("action", Reuters.nav.PRIMARY_SITE_URL +'/search');
}
$('#nav-strip a').each(function(ind) {
if (this.href.search(/\.reuters.com/i) == -1) {
this.target = "_blank";
}
});
</script>
</body>
</html>
이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.