怎麼用div+css製作導航下拉選單
- IT科技
- 關注:1.06W次
導航選單是每個網站所必備的功能,也是每個學習製作網站的朋友所必須接觸的,如何用css樣式製作一個簡單漂亮的二級下拉選單呢
方法
打看dreamweaver或其它編輯器,創建一個名爲nav的導航選單
現在爲nav添加樣式,首先去掉默認的margin和padding,再去掉<ul>< li>標籤的list-style樣式和<a>標籤的默認下劃線。
像這樣,一個選單橫向選單就建好了,下來給欄目一,欄目二,欄目三,添加二級下拉選單
添加完二級欄目後,現在開始添加css樣式,首先給<li>標籤下的<ul>標籤添加相對定位,再去除之下<li>標籤的做浮動樣式,再適當修改<a>標籤
接下來隱藏掉二級下來選單,並給它添加鼠標滑動效果,使得當鼠標滑動到主欄目時,二級下來選單顯示。完成編輯
擴展閱讀,以下內容您可能還感興趣。
如何使用HTML和CSS製作下拉選單
使用HTML和CSS製作下拉選單的方法如下:
1、編寫帶有div導航的html代碼:
2、使用class=“nav”屬性的‘div’標籤作爲選單的容器。在截圖中,在圖示的HTML代碼中,一個簡單的無序列表(ul)來表示主選單項。
3、在主選單區域中添加連結。在本步驟中,在無序列表(ul)每一項上添加連結。
4、在“關於我們(About Us)”下方LI標籤內添加一個無序列表,它代表其子選單的連結。
5、製作導航css:
如何用DIV+CSS做漂亮的橫排導航欄
先碼好導航欄所需要的基本的HTML代碼
這個就不必多說具體的代碼如下:
<html>
<head>
<title>橫向導航欄</title>
<style>
<!---->
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">導航1</a></li>
<li><a href="#">導航2</a></li>
<li><a href="#">導航3</a></li>
<li><a href="#">導航4</a></li>
<li><a href="#">導航5</a></li>
<li><a href="#">導航6</a></li>
</ul>
</div>
</body>
</html>
下面我們透過CSS 來改變他的樣式。
首先我們先讓導航在瀏覽器的中間。不過在讓他居中前得先設定一個寬度,沒有寬度就沒法居中,這個的原因我就不用贅述了吧!
現在常用的網站寬度爲960或980(當然也有其他的,一些網站會根據訪客的顯示器大小有不同寬度的樣式,原因我就不在這多廢話了)我們在這就用980吧。
方法是在<style></style>之間加入如下代碼來改變他的寬度。爲了讓結果明顯,我們給它又加了一個邊框。
<style>
<!--
.nav ul{
width:980px;/*設定元素寬度爲980px*/
border:1px solid #000;/*設定一個顏色爲#000,寬度爲1px的邊框*/
}
-->
</style>
接下來我們讓他居中。我們在樣式中加入以下代碼。
.nav ul{
width:980px;/*設定元素寬度爲980px*/
border:1px solid #000;/*設定一個顏色爲#000,寬度爲1px的邊框*/
margin:0px auto 0px auto;/*也可以簡寫爲margin:0 auto*/
}
因爲我們要做的是橫向的導航欄,所以現在我們要把它變成橫向排列。我們在樣式中加入以下代碼。
.nav ul li{
float:left;/*讓li元素左浮動*/
}
我們看到測試結果如圖4。
邊框之所以擠到一起了是因爲浮動以後 li就變成了聯級元素,就沒有寬和高了,所以也就沒法把邊框撐起來了啊。(具體的原因想知道可以百度)當然稍後我們可以給ul或.nav加上高度。
接下來,我們透過給元素<a>添加樣式,讓他更美觀。加入以下代碼。
.nav ul li a{
width:80px;/*設定元素寬爲80px*/
height:28px;/*設定高度爲28px*/
line-height:28px;/*設定行距爲28px,讓文字在每行的中間位置*/
background:red;/*設定元素的背景爲紅色*/
color:#FFF;/*文字顏色是白色*/
margin:5px 10px;
font-size:12px;/*用12號字*/
display:block;/*這個比較關鍵,因爲a本身就是聯級元素,本身不具有寬高,用這個把它變成塊級元素,這樣前面設定的寬和高就能起作用了*/
text-align:center;/*讓文字居中*/
text-decoration:none; /*去掉下劃線*/
}
我們再加入點互動,當訪客鼠標放到某個元素上的時候,這個元素要有別於其他元素。要實現這個我們就要用到:hover這個僞類。在樣式中加入以下代碼。
.nav ul li a:hover{ /*這個大概的意思就是當鼠標放到這個a元素的上面時,這個a元素的樣式就按下面的代碼執行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
最後稍微整理一下代碼
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果,成功沒?
思路就是這樣的,其中還可以再加一些自己的元素,比如背景圖片之類,效果就更好了。
用 DIV+CSS+JQuery 實現導航條垂直下拉效果
<style type="text/css">
.navgation{marign:0;padding:0;list-style-type:none;}
.navgation li {display:inline;}
.nvagation a{padding:3px 6px;background-color:blue;color:white;text-decoration:none;}
.nvagation a:hover {background-color:white;color:blue;text-decoration:underline;}
.nvagation div{display:none;}
</style>
<script type="javascript/text'>
$(document).ready(function(){
$(".navgation a").each(function(){
var this_div = $(".navgation div");
var _inx = $(".navgation a").index(this);
$(this).hover(
function(){this_div.eq(_inx).slideToggle();},
function(){this_div.eq(_inx).slideToggle();}
);
});
});
</script>
<ul class="navgation">
<li><a href="#">連結1</a><div>這裏放下拉內容</div></li>
<li><a href="#">連結1</a><div>這裏放下拉內容</div></li>
<li><a href="#">連結1</a><div>這裏放下拉內容</div></li>
<li><a href="#">連結1</a><div>這裏放下拉內容</div></li>
<li><a href="#">連結1</a><div>這裏放下拉內容</div></li>
</ul>
哈哈,深夜了,寫得真是爛。。。追問對不起我是菜鳥 用你寫的這個 預覽居然 是空白頁 不知道爲什麼
您能不能 把總個代碼寫出來= =追答
.navgation{marign:0;padding:0;list-style-type:none;position:relative;}
.navgation li {float:left;}
.navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:none;float:left;height:24px;}
.navgation a:hover {background-color:white;color:blue;text-decoration:underline;}
.navgation div{display:none;position:absolute;top:30px;l}
$(document).ready(function(){
$(".navgation a").each(function(){
var this_div = $(".navgation div");
var _inx = $(".navgation a").index(this);
$(this).hover(
function(){this_div.eq(_inx).slideToggle();},
function(){this_div.eq(_inx).slideToggle();}
);
});
});
連結1這裏放下拉內容1
連結2這裏放下拉內容2
連結3這裏放下拉內容3
連結4這裏放下拉內容4
連結5這裏放下拉內容5
哈哈,不好意思,之前寫的標籤閉合有問題。
如何用div+css做漂亮的橫排導航欄
看你是直接在div裏面做css格式還是額外調用css,建議是後者,這樣看着比較簡潔。
html引入外部css:
<link rel="stylesheet" href="檔案路徑/檔案名.css">
比如你的html檔案裏有一個div模組
<div id ="daohang">
<div id = "daohang1" class =“geshi”>導航1</div>
<div id ="daohang2" class =“geshi”>導航2</div>
<div id ="daohang3" class =“geshi”>導航3</div>
</div>
在另外一個css檔案里布置格式
#daohang{
height: 30px;
background-color: white;
border: solid 1px yellow;
margin: 2px 0;
line-height: 30px;
.........
}
依次類推設定3個子div的格式。class用於設定3個子div的共同格式;
比如設定共同字型:
.geshi{
font-family: 微軟雅黑;
}
需要什麼樣的排版格式百度下怎麼設定就行了 上面這個主要是框架,具體的格式就在css檔案裏面設定,什麼顏色\背景\字型\位置等等都在css裏設定就行,html的div裏面不需做什麼操作
用div+css做多級下拉選單怎麼做
給你個源碼作爲參考 用純CSS+HTML編寫而成
____________________________________
Suckerfish下拉選單
<!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>Untitled Page</title>
<style type="text/css">
ul.nav,ul.nav ul
{
margin:0;
padding:0;
list-style-type:none;
font:left;
}
ul.nav li
{
float: left;
width: 8em;
background-color: #8BD400;
}
ul.nav li ul
{
width: 8em;
position: absolute;
left: -999em;
}
.nav li:hover ul
{
left: auto;
}
ul.nav a
{
display: block;
color: #2B3F00;
text-decoration: none;
padding: 0.3em 1em;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a
{
border-bottom: 1px solid #486B02;
border-top: 1px solid #486B02;
border-right: 0;
border-left: 0;
}
ul.nav li:last-child a
{
border-right: 0;
border-bottom: 0;
}
ul a:hover, ul a:focus
{
color: #E4FFD3;
background-color: #6DA203;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a>
<ul>
<li><a href="#">SilverBack</a></li>
<li><a href="#">Font Deck</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Consultancy</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>
- 文章版權屬於文章作者所有,轉載請註明 https://shqsg.com/zh-hant/dianzi/m0zn.html