Code d'effet du menu de navigation secondaire gris sur fond noir implémenté par js

Maison

interface Web

js tutoriel

Code d'effet du menu de navigation secondaire gris sur fond noir implémenté par js_jquery

May 16, 2016 pm 03:43 PM

js 菜单

L'exemple de cet article décrit le code d'effet du menu de navigation secondaire gris sur fond noir implémenté par js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de navigation secondaire implémenté par js avec un fond noir et une couleur grise, qui est compatible avec le menu de navigation bipolaire horizontal js css d'IE6 et de Firefox. C'est assez simple, mais très rafraîchissant. Le menu secondaire est affiché horizontalement sous le menu principal, en utilisant la police populaire Microsoft Yahei. Si vous ne souhaitez pas utiliser cette police, vous pouvez la remplacer par la police Song Dynasty par défaut.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/

Le code spécifique est le suivant :

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"&gt;
&lt;TITLE&gt;兼容IE6、firefox的灰色横向二极导航菜单代码&lt;/TITLE&gt;
&lt;style type=text/css&gt;
BODY { background:#26272b;}
a{ color:#FFFFFF}
UL {LIST-STYLE-TYPE: none;padding:0px;margin:0px;}
LI {FONT-SIZE: 12px; COLOR: #333; LINE-HEIGHT: 1.5em; FONT-FAMILY: "微软雅黑", Arial, Verdana;}
.hide {DISPLAY: none}
#mainmenu_top{width:980px; margin:0 auto;BACKGROUND: url('images/nav_bg.gif') bottom repeat-x;HEIGHT: 40px; }
#mainmenu_top UL{}
#mainmenu_top UL LI {FLOAT: left;}
#mainmenu_top UL LI A {WIDTH: 100px;CURSOR: pointer;line-HEIGHT:32px;padding:6px 0 2px;text-decoration: none;DISPLAY: block;COLOR: #fff;TEXT-ALIGN: center; FONT-WEIGHT: bold;}
#mainmenu_top .menu-lft {padding-left:10px;background:url('images/nav_l.gif') no-repeat left bottom;height:40px;}
#mainmenu_top .menu-rht {background:url('images/nav_r.gif') no-repeat right bottom;height:40px;}
#mainmenu_top UL LI .menuhover {BACKGROUND: url('images/nav_hover.gif') bottom repeat-x; COLOR: #000;}
#mainmenu_top UL LI.home{BACKGROUND: url('images/nav_home.gif') center bottom no-repeat;}
#mainmenu_bottom {width:980px; margin:0 auto;height:32px;line-height:32px;display:block;overflow:hidden;BACKGROUND:#fff;}
#mainmenu_bottom UL LI { FLOAT: left; MARGIN-LEFT:12px;padding:0 12px;HEIGHT: 32px;}
#mainmenu_bottom UL LI A {COLOR: #313131; LINE-HEIGHT: 32px;PADDING-RIGHT: 18px;DISPLAY: block;text-decoration: none; background:url('images/line.gif') no-repeat right bottom;}
#mainmenu_bottom UL LI A:hover {text-decoration: underline;}
&lt;/style&gt;
&lt;SCRIPT type=text/javascript&gt;
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//获取id的函数
{
 if(document.getElementById && document.getElementById(objectId)) {
 // W3C DOM
 return document.getElementById(objectId);
 } else if (document.all && document.all(objectId)) {
 // MSIE 4 DOM
 return document.all(objectId);
 } else if (document.layers && document.layers[objectId]) {
 // NN 4 DOM.. note: this won't find nested layers
 return document.layers[objectId];
 } else {
 return false;
 }
}
function SetTimer()//主导航时间延迟的函数
{
 for(j=1; j &lt;10; j++){
 if (j == number){
 if(getObject("mm"+j)!=false){
  getObject("mm"+ number).className = "menuhover";
  getObject("mb"+ number).className = "";
 }
 }
 else{
  if(getObject("mm"+j)!=false){
  getObject("mm"+ j).className = "";
  getObject("mb"+ j).className = "hide";
 }
 }
 }
}
function CheckTime()//设置时间延迟后
{
 secondLeft--;
 if ( secondLeft == 0 )
 {
 clearInterval(timer);
 SetTimer();
 }
}
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
{
 number = Num;
 sourceObj = thisobj;
 secondLeft = 1;
 timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
{
 clearInterval(timer);
}
&lt;/SCRIPT&gt;
&lt;!--导航开始--&gt;
&lt;DIV id=mainmenu_body&gt;
&lt;!--主导航开始--&gt;
 &lt;DIV id=mainmenu_top&gt;
 &lt;div class="menu-lft"&gt;&lt;div class="menu-rht"&gt;
 &lt;UL&gt;
 &lt;LI class="home"&gt;&lt;A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;网站首页&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;JS代码&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;电子商务&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;脚本下载&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;建站技巧&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;CSS技巧&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;CSS导航菜单&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent&gt;SEO优化&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;/DIV&gt;&lt;/DIV&gt;
 &lt;/DIV&gt;
&lt;!--子导航导航开始--&gt;
 &lt;DIV id=mainmenu_bottom&gt;
 &lt;UL class=hide id=mb1&gt;
 &lt;LI&gt;&lt;A href="#"&gt;2012年元旦网站推广惊喜促销价&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#"&gt;网站公告：脚本之家7年了&lt;/A&gt; &lt;/LI&gt; &lt;/UL&gt;
 &lt;UL class=hide id=mb2&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网页特效&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb3&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网页特效&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb4&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网页特效&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb5&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;服务器租用首页&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;超级机房&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb6&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本下载&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb7&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;个人建站&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;门户建站&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb8 style="DISPLAY: none"&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
 &lt;UL class=hide id=mb9&gt;
 &lt;LI&gt;&lt;A href="#"&gt;脚本之家&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网页特效&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;
 &lt;LI&gt;&lt;A href="#" target=_parent&gt;网络营销&lt;/A&gt; &lt;/LI&gt;&lt;/UL&gt;
&lt;script&gt;
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" ); 
thisUPage_s = tmpUPage[ tmpUPage.length-2 ]; 
thisUPage_s= thisUPage_s.toLowerCase();//小写
//thisUPage=thisUPage.substring(0,4)
 if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
 {
  getObject("mm1").className="menuhover"
  getObject("mb1").className = "";
 }
 else if(thisUPage_s=="domain")
 {
  getObject("mm2").className="menuhover"
  getObject("mb2").className = "";
 }
 else if(thisUPage_s=="hosting")
 {
  getObject("mm3").className="menuhover"
  getObject("mb3").className = "";
 } 
 else if(thisUPage_s=="mail")
 {
  getObject("mm4").className="menuhover"
  getObject("mb4").className = "";
 }
 else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
  getObject("mm5").className="menuhover"
  getObject("mb5").className = "";
 }
 else if(thisUPage_s=="promotion"){
  getObject("mm6").className="menuhover"
  getObject("mb6").className = "";
 }
 else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
  getObject("mm7").className="menuhover"
  getObject("mb7").className = "";
 }
 else if(thisUPage_s=="benefit"){
  getObject("mm8").className="menuhover"
  getObject("mb8").className = "";
 }
 else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
  getObject("mm9").className="menuhover"
  getObject("mb9").className = "";
 }
 else
 {
  getObject("mm1").className="";
  getObject("mb1").className = "";
 }
}
window.load=mmenuURL()
&lt;/script&gt;
&lt;/DIV&gt;
&lt;/DIV&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn