怎麼用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>

<ul>

</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 實現導航條垂直下拉效果

.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>

$(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>

<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:

比如你的html檔案裡有一個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">

<head>

<title>Untitled Page</title>

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>

<li><a href="#">Product</a>

<ul>

<li><a href="#">SilverBack</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>

標籤： divcss 導航下拉選單

文章版權屬於文章作者所有，轉載請註明 https://shqsg.com/dianzi/m0zn.html

當前位置：生活全書館 >

IT科技

怎麼用div+css製作導航下拉選單

相關內容

熱門文章

猜你喜歡