js代码实现微博导航栏
微博导航看起来很美观,实现起来也不麻烦,直接写代码了
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> <scripttype="text/javascript"> varhiddenChild=function(obj){ varul=obj.getElementsByTagName("ul")[0]; ul.style.display='none'; } /* *obj表示导航条中的直接li */ varshowChild=function(obj){ varul=obj.getElementsByTagName("ul")[0]; ul.style.display='block'; } </script> <styletype="text/css"> *{ margin:0px; padding:0px } /*导航条*/ #nav{ line-height:60px; list-style-type:none; background-color:#0000FF; text-align:center; } #nava{ color:white; text-decoration:none; display:block; width:80px; font-size:20px; font-weight:800; } #nava:hover{ background-color:#ccc; } #navli{ background-color:blue; float:left; color:white; list-style-type:none; } #navliul{ position:absolute; display:none; width:130px; } .show{ display:block; } </style> </head> <body> <ulid="nav"> <lionmouseover="showChild(this);"onmouseleave="hiddenChild(this);"> <ahref="#">首页</a> <ul> <li> <ahref="#">全部广播</a> </li> <li> <ahref="#">好友</a> </li> <li> <ahref="#">关注</a> </li> </ul> </li> <lionmouseover="showChild(this);"onmouseleave="hiddenChild(this);"> <ahref="#">微频道</a> <ul> <li> <ahref="#">微频道1</a> </li> <li> <ahref="#">微频道2</a> </li> </ul> </li> <lionmouseover="showChild(this);"onmouseleave="hiddenChild(this);"> <ahref="#">找人</a> <ul> <li> <ahref="#">明星</a> </li> <li> <ahref="#">达人</a> </li> </ul> </li> <lionmouseover="showChild(this);"onmouseleave="hiddenChild(this);"> <ahref="#">微群</a> <ul> <li> <ahref="#">股票</a> </li> </ul> </li> </ul> </body> </html>
以上代码就是用js实现微博导航栏,需要的朋友可以来参考下。