来自 计算机网络 2019-09-04 19:49 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

css完成的新民主主义革命线条横向二级菜单成效

本文实例讲述了jquery实现的横向二级导航效果代码。分享给大家供大家参考。具体如下:

本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下:

这是一款灰色和黑色共同搭配做出的水平横向网站菜单,网页横向菜单代码,包括二级子菜单,使用了几张图片,用的朋友自己顺路径另存为吧。本菜单兼容性不错,而且设计清新、漂亮、简约,鼠标移动到主菜单上,即可下滑出二级子菜单项。

这是一款带导航的菜单,当前是哪一项菜单,会很个性的显示出来,鼠标放上后会显示菜单缺口,挺有意思的吧,希望大家喜欢。

先来看看运行效果截图:

运行效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

具体代码如下:

具体代码如下:

<!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: url(images/bg_texture.png);font-family:5B8B4F53,Arial Narrow,arial,serif; color:#fff;}
a {color: #fff;text-decoration: none;cursor: pointer;cursor: hand;}
a:hover{text-decoration: underline;}
ul {margin:0;padding:0;list-style:none;}
#header {float: left;display: inline;width: 100%;min-width: 980px;padding: 0;margin:0;height:119px;overflow: visible;}
#dd-navigation {background: url('images/nav-bg.png') repeat-x;clear:both; border-top:1px solid #1b1b1b;border-bottom:1px solid #1b1b1b;height: 48px;}
#nav-strip ul li.nav-item,#nav-strip ul li.nav-item.active ,#nav-strip ul li.nav-item:hover{border-left: 1px solid #373737;border-right: 1px solid #181818;}
#nav-strip {clear: both; margin: 0 auto;width: 936px;height: 48px;line-height: 28px;position:relative;z-index: 16777265;border-right: solid 1px #373737;border-left: solid 1px #181818;background: url('images/nav-li.png') repeat-x;}
#nav-strip a:hover {text-decoration:none;}
#nav-strip ul li.nav-item { display: inline;float: left;position:relative;width:115px;height: 48px;text-align:center;}
#nav-strip ul li.nav-item:hover, #nav-strip ul li.nav-item.hover{background: url('images/nav-hover.png') repeat-x;}
#nav-strip ul li.nav-item:hover a, #nav-strip ul li.nav-item.hover a{color: #6ebb1f;}
#nav-strip ul li a{ font-weight: bold;color: #FFFFFF;display:block;padding:10px;font-size: 14px;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:49px;left: -1px;background:#282828;border-top:1px solid #313131;border-left: 1px solid #333;border-right: 1px solid #333;border-bottom: 1px solid #333;z-index: 16777263;*min-width: 150px;-webkit-box-shadow:0 0px 2px #000;-moz-box-shadow:0 0px 2px #000;box-shadow:0 0px 2px #000;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;-moz-border-bottom-left-radius:2px;-moz-border-bottom-right-radius:2px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;}
#nav-strip .subnav-inner {float: left;width: 160px;}
#nav-strip ul li .subnav ul{margin-bottom: 3px;float: left;width: 160px;margin:0;}
#nav-strip ul li .subnav ul li{display:block;border-bottom:1px solid #333;float:left;height: auto;margin: 0;width: 160px;}
#nav-strip ul li .subnav ul 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: #fff;white-space: nowrap;*white-space: normal; _white-space: nowrap;padding: 5px 24px; 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 {background: #0a0a0a url('images/arrow.gif') 6px 16px no-repeat; color:#6ebb1f!important; }
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="header"></div>
 <div id="dd-navigation">
  <div id="nav-strip">
  <ul>
  <li class="nav-item no-subnav active" id="nav-item_1"><a href="#" >首页</a></li>
  <li class="nav-item" id="nav-item_2"><a href="#" >关于我们</a>
   <div class="subnav " id="subnav_2">   
   <div class="subnav-inner">
   <ul>   
    <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="#" >产品展示</a>
   <div class="subnav " id="subnav_3">   
   <div class="subnav-inner">
   <ul>   
    <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="#" >行业资讯</a>
   <div class="subnav " id="subnav_4">   
   <div class="subnav-inner">
   <ul>   
    <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="#" >工程案例</a>
   <div class="subnav " id="subnav_5">   
   <div class="subnav-inner">
   <ul>   
    <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" id="nav-item_6"><a href="#" >源码空间</a></li>
  <li class="nav-item" id="nav-item_7"><a href="#" >联系我们</a>
   <div class="subnav" id="subnav_7">   
   <div class="subnav-inner">
   <ul>   
    <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="#" >客服中心</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.reuters.com';
}
if(Reuters.info.edition == 'BETAUS' || Reuters.info.edition == 'US') {
 Reuters.nav.PRIMARY_SITE_URL = 'http://www.reuters.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>
<!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>
<title>css+js红色线条横向二级菜单</title>
<style>
body {font-family:5B8B4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}
li{list-style-type:none;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
#nav{ background:url('images/nav_li_bg.gif') repeat-x top; height:37px; position:relative;width:988px; margin:20px auto;}
#nav .l{ background:url('images/nav_li_left.gif') no-repeat top; height:37px;width:78px; float:left}
#nav .r{width:82px;background:url('images/nav_li_rights.gif') no-repeat right top;height:37px;float:left;}
#nav li { float:left;}
#nav li .v a{ width:138px;height:37px; line-height:32px; display:block; color:#FFF;float:left;font-weight:bold;text-decoration:none;text-align:center;}
#nav li .v a:hover,#nav li .v .sele{width:138px;background:url('images/nav_li_hover.gif') no-repeat top;color:#fff;height:37px;line-height:37px;color:#d11515;}
.kind_menu { height:30px;line-height:30px;vertical-align:middle; position:absolute;top:37px;left:0;text-align:left; display:none;color:#333;font-size:12px;}
.kind_menu a {color:#333; background:url('images/sub_dot.gif') no-repeat left 14px;float:left; text-align:center;padding:0 10px;font-size:12px;text-decoration:none;}
.kind_menu a:hover {color:#000;text-decoration:none;}
#Layer1{width:400px;left:60px;}
#Layer2{width:400px;left:200px;}
#Layer3{width:500px;left:300px;}
#Layer4{width:400px;left:400px;}
#Layer5{width:400px;left:auto;right:120px;}
#Layer6{width:560px;left:auto;right:60px;}
</style>
<SCRIPT src="jquery-1.6.2.min.js" type="text/javascript"></SCRIPT>
</head>
<body>
<DIV id=nav>
<DIV class=l></DIV>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">网站首页</A></SPAN>
 <DIV class=kind_menu id="Layer1">欢迎访问,我们为您提供最优质的网络营销服务! </DIV></LI>
 <LI><SPAN class=v><A href="#">脚本之家</A></SPAN>
 <DIV class=kind_menu id="Layer2">
 <A href="#">脚本下载</A>
 <A href="#">脚本教程</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">导航条</A></SPAN>
 <DIV class=kind_menu id="Layer3">
 <A href="#">英文域名</A>
 <A href="#">中文域名</A>
 <A href="#">通用网址</A>
 <A href="#">源码下载</A>
 <A href="#">域名交易</A>
 <A href="#">域名帮助</A>
 <A href="#">智能加速</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">电子商务</A></SPAN>
 <DIV class=kind_menu id="Layer4">
 <A href="#">网络营销</A>
 <A href="#">源码下载</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">网络营销</A></SPAN>
 <DIV class=kind_menu id="Layer5">
 <A href="#">网络营销</A>
 <A href="#">网络营销</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效代码</A> </DIV></LI>
 <LI><SPAN class=v><A href="#">关于我们</A></SPAN>
 <DIV class=kind_menu id="Layer6">
 <A href="#">网络营销</A>
 <A href="#">源码下载</A>
 <A href="#">网络营销</A>
 <A href="#">网页特效</A> </DIV></LI>
 </UL>
 <DIV class=r></DIV>
</DIV><!--nav-->
<SCRIPT type="text/javascript">
var site_url = window.location.href.toLowerCase();
switch (true) {
 default :
  $("#nav li").attr("class","");
  $("#nav li").eq(0).attr("class","nav_lishw");
  $(".nav_lishw .v a").attr("class","sele");
  $(".nav_lishw .kind_menu").show();
}
$("#nav li").hover(
function(){
  clearTimeout(setTimeout("0")-1);
  $("#nav .kind_menu").hide();
  $("#nav li .v .sele").attr("class","shutAhover");
  $(this).attr("id","nav_hover")
  $("#nav_hover .v a").attr("class","sele");
  $("#nav_hover .kind_menu").show();
 },
function(){
 if($(this).attr("class") != "nav_lishw"){
   $("#nav_hover .v .sele").attr("class","");
   $("#nav_hover .kind_menu").hide();
  }
  $(this).attr("id","")
  $("#nav li .v .shutAhover").attr("class","sele");
  setTimeout(function(){
   $(".nav_lishw .kind_menu").show();
   $(".nav_lishw .v a").attr("class","sele");
  },50);
 }
);
</SCRIPT>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

希望本文所述对大家的jquery程序设计有所帮助。

您可能感兴趣的文章:

  • jquery实现向下滑出的二级导航下滑菜单效果
  • jquery实现的蓝色二级导航条效果代码
  • jquery二级导航内容均分的原理及实现
  • Jquery实现带动画效果的经典二级导航菜单
  • jQuery实现灰蓝风格标准二级下拉菜单效果代码
  • jquery实现平滑的二级下拉菜单效果
  • jquery实现漂亮的二级下拉菜单代码
  • jquery实现鼠标滑过显示二级下拉菜单效果
  • jquery实现简单的二级导航下拉菜单效果

您可能感兴趣的文章:

  • JQuery实现绚丽的横向下拉菜单
  • jquery实现无限分级横向导航菜单的方法
  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载
  • jquery实现可横向和竖向展开的动态下滑菜单效果
  • jquery实现仿Flash的横向滑动菜单效果代码
  • Jquery实现纵向横向菜单

本文由六合联盟网发布于计算机网络,转载请注明出处:css完成的新民主主义革命线条横向二级菜单成效

关键词: