js代碼實(shí)現(xiàn)微博導(dǎo)航欄
更新時(shí)間：2015年07月30日 11:42:05 作者：dllling
這篇文章主要介紹了js代碼實(shí)現(xiàn)微博導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下
微博導(dǎo)航看起來(lái)很美觀，實(shí)現(xiàn)起來(lái)也不麻煩，直接寫(xiě)代碼了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var hiddenChild = function(obj) {
var ul = obj.getElementsByTagName("ul")[0];
ul.style.display = 'none';
}
/*
*obj表示導(dǎo)航條中的直接li
*/
var showChild = function(obj) {
var ul = obj.getElementsByTagName("ul")[0];
ul.style.display = 'block';
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px
}
/*導(dǎo)航條*/
#nav {
line-height: 60px;
list-style-type: none;
background-color: #0000FF;
text-align: center;
}
#nav a {
color: white;
text-decoration: none;
display: block;
width: 80px;
font-size: 20px;
font-weight: 800;
}
#nav a:hover {
background-color: #ccc;
}
#nav li {
background-color: blue;
float: left;
color: white;
list-style-type: none;
}
#nav li ul {
position: absolute;
display: none;
width: 130px;
}
.show {
display: block;
}
</style>
</head>
<body>
<ul id="nav">
<li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
<a href="#">首頁(yè)</a>
<ul>
<li>
<a href="#">全部廣播</a>
</li>
<li>
<a href="#">好友</a>
</li>
<li>
<a href="#">關(guān)注</a>
</li>
</ul>
</li>
<li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
<a href="#">微頻道</a>
<ul>
<li>
<a href="#">微頻道1</a>
</li>
<li>
<a href="#">微頻道2</a>
</li>
</ul>
</li>
<li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
<a href="#">找人</a>
<ul>
<li>
<a href="#">明星</a>
</li>
<li>
<a href="#">達(dá)人</a>
</li>
</ul>
</li>
<li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);">
<a href="#">微群</a>
<ul>
<li>
<a href="#">股票</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
以上代碼就是用js實(shí)現(xiàn)微博導(dǎo)航欄，需要的朋友可以來(lái)參考下。
您可能感興趣的文章:
- 原生JS實(shí)現(xiàn) MUI導(dǎo)航欄透明漸變效果
- JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
- JavaScript實(shí)現(xiàn)滑動(dòng)導(dǎo)航欄效果
- JS滾動(dòng)到指定位置導(dǎo)航欄固定頂部
- JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航欄變色特效
- js實(shí)現(xiàn)導(dǎo)航欄中英文切換效果
- js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫(huà)的導(dǎo)航欄效果
- Fullpage.js固定導(dǎo)航欄-實(shí)現(xiàn)定位導(dǎo)航欄
- 一步步教大家編寫(xiě)酷炫的導(dǎo)航欄js+css實(shí)現(xiàn)
- js導(dǎo)航欄單擊事件背景變換示例代碼
- JavaScript滿天星導(dǎo)航欄實(shí)現(xiàn)方法
相關(guān)文章
本文提供了6種php上傳圖片重命名的方法并對(duì)6種方法做了比較，肯定有一種合適你用的。2013-11-11
php微信公眾號(hào)開(kāi)發(fā)之現(xiàn)金紅包
這篇文章主要為大家詳細(xì)介紹了php微信公眾號(hào)開(kāi)發(fā)之現(xiàn)金紅包，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Codeigniter控制器controller繼承問(wèn)題實(shí)例分析
這篇文章主要介紹了Codeigniter控制器controller繼承問(wèn)題,以簡(jiǎn)單實(shí)例形式分析了CodeIgniter中針對(duì)控制器controller繼承的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-01-01
PHP中的Interface是一種非常重要的特性，它允許開(kāi)發(fā)人員定義一組規(guī)范或者約束，以確保類之間的互操作性和兼容性。在本文中，我們將詳細(xì)介紹PHP中的Interface的概念、定義、實(shí)現(xiàn)、使用、使用場(chǎng)景以及其它相關(guān)的一些知識(shí)點(diǎn)，需要的朋友可以參考下2023-04-04
Laravel 5框架學(xué)習(xí)之Eloquent （laravel 的ORM）
Laravel 的 Eloquent ORM 提供了漂亮、簡(jiǎn)潔的 ActiveRecord 實(shí)現(xiàn)來(lái)和數(shù)據(jù)庫(kù)的互動(dòng)。 每個(gè)數(shù)據(jù)庫(kù)表會(huì)和一個(gè)對(duì)應(yīng)的「模型」互動(dòng)。在開(kāi)始之前，記得把 config/database.php 里的數(shù)據(jù)庫(kù)連接配置好。2015-04-04
ThinkPHP5+UEditor圖片上傳到阿里云對(duì)象存儲(chǔ)OSS功能示例
這篇文章主要介紹了ThinkPHP5+UEditor圖片上傳到阿里云對(duì)象存儲(chǔ)OSS功能,結(jié)合實(shí)例形式分析了ThinkPHP5使用富文本編輯器UEditor實(shí)現(xiàn)圖片上傳到阿里云的相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
linux實(shí)現(xiàn)php定時(shí)執(zhí)行cron任務(wù)詳解
linux實(shí)現(xiàn)php定時(shí)執(zhí)行cron任務(wù)2013-12-12
php結(jié)合redis高并發(fā)下發(fā)帖、發(fā)微博的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇php結(jié)合redis高并發(fā)下發(fā)帖、發(fā)微博的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
thinkPHP統(tǒng)計(jì)排行與分頁(yè)顯示功能示例
這篇文章主要介紹了thinkPHP統(tǒng)計(jì)排行與分頁(yè)顯示功能,結(jié)合實(shí)例形式分析了thinkPHP數(shù)據(jù)庫(kù)查詢與結(jié)果分頁(yè)顯示相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
PHP常量DIRECTORY_SEPARATOR原理及用法解析
這篇文章主要介紹了PHP常量DIRECTORY_SEPARATOR原理及用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11