html水平导航栏代码（HTML导航栏代码）

今天给各位分享html水平导航栏代码的知识，其中也会对HTML导航栏代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、html导航栏,这种类型的怎么写！？
• 2、CSS如何实现网页导航栏置顶
• 3、我用html做了一个导航栏，代码如下：
• 4、html下拉导航栏代码

html导航栏,这种类型的怎么写！？

这个只是一个图标字体，一般要结合js点击或者经过触发事件。

代码：

head

meta charset='utf-8' /

titleHTML调试/title

script type="text/javascript" src="js/jquery-1.8.0.min.js"/script

script src='js/zui.min.js' type='text/javascript' charset='utf-8'/script

link rel='stylesheet' type='text/css' href='css/zui.css' /

style type="text/css"

body,

div,

ul,

li {

margin: 0;

padding: 0;

}

body {

font-family: "微软雅黑", Arial, Helvetica, sans-serif;

color: #333333;

line-height: 25px;

font-size: 14px;

}

a:link,

a:visited {

text-decoration: none;

color: #333333;

}

a:hover {

text-decoration: underline;

color: #08A5E0;

text-decoration: none;

}

ul,

ul li {

list-style-type: none;

}

.cl {

zoom: 1;

}

.navbg {

height: 40px;

width: 100%;

background: #08A5E0;

box-shadow: 1px 1px 7px #999;

position: absolute;

z-index: 99;

left: 0;

}

#navul li {

float: left;

margin-right: 1px;

width: 100px;

height: 40px;

position: relative;

text-align: center;

line-height: 40px;

}

#navul li.navhome {

text-align: left;

padding: 0 0px 0 40px;

width: 100px;

}

#navul li a:link,

#navul li a:visited {

color: #FFFFFF;

}

#navul li ul {

display: none;

position: absolute;

z-index: 10000;

top: 38px;

left: -1px;

background: #006D96;

border: #004E6C 1px solid;

border-bottom: none;

}

#navul li ul li {

display: block;

width: 98px;

float: none;

margin-right: 0px;

height: 28px;

position: relative;

line-height: 28px;

border-bottom: #004E6C 1px solid;

font-size: 12px;

}

#navul li.navmoon {

background: #006D96;

border: #004E6C 1px solid;

width: 98px;

height: 38px;

line-height: 38px;

}

#navul li.navmoon a {

color: #FFFFFF;

}

#navul li.navhome a:hover {

color: #FCFF00;

}

#navul li.navmoon ul {

display: block;

}

#navul li.navmoon ul a {

display: block;

width: 98px;

height: 28px;

line-height: 28px;

}

#navul li.navmoon ul a:hover {

background: #000000;

}

/style

/head

body

div class="navbg"

ul id="navul" class="cl"

li class="navhome"

a href="" target="_blank"HOME/a

/li

li

a href="" title="Html"Html/a

ul

li

a href="" title="HTML"HTML/a

/li

li

a href="" title="HTML5"HTML5/a

/li

/ul

/li

li

a href="" title="CSS"CSS/a

ul

li

a href="" title="CSS入门"CSS入门/a

/li

li

a href="" title="CSS工具"CSS工具/a

/li

li

a href="" title="CSS技巧"CSS技巧/a

/li

li

a href="" title="CSS实例"CSS实例/a

/li

li

a href="" title="CSS3"CSS3/a

/li

li

a href="" title="CSS hack"CSS hack/a

/li

li

a href="" title="CSS2.0 手册"CSS2.0 手册/a

/li

/ul

/li

li

a href="" title="网页特效"网页特效/a

ul

li

a href="" title="导航菜单"导航菜单/a

/li

li

a href="" title="表单按钮"表单按钮/a

/li

li

a href="" title="表格图层"表格图层/a

/li

li

a href="" title="图片特效"图片特效/a

/li

li

a href="" title="滚动特效"滚动特效/a

/li

li

a href="" title="文字特效"文字特效/a

/li

li

a href="" title="时间日期"时间日期/a

/li

li

a href="" title="窗口特效"窗口特效/a

/li

li

a href="" title="鼠标特效"鼠标特效/a

/li

/ul

/li

li

a href="" title="前端资讯"前端资讯/a

ul

li

a href="" title="用户体验"用户体验/a

/li

li

a href="" title="前端观察"前端观察/a

/li

li

a href="" title="职业生涯"职业生涯/a

/li

/ul

/li

li

a href="" title="前端技巧"前端技巧/a

ul

li

a href="" title="布局技巧"布局技巧/a

/li

li

a href="" title="网页字体"网页字体/a

/li

li

a href="" title="flash"flash/a

/li

/ul

/li

li

a href="" title="杂七杂八"杂七杂八/a

ul

li

a href="" title="帝国cms"帝国cms/a

/li

li

a href="" title="电脑技巧"电脑技巧/a

/li

li

a href="" title="随笔杂谈"随笔杂谈/a

/li

/ul

/li

li

a href="" title="Javascript"Javascript/a

ul

li

a href="" title="Jquery"Jquery/a

/li

li

a href="" title="Js学习"Js学习/a

/li

li

a href="" title="Js教程"Js教程/a

/li

/ul

/li

li

a href="" title="网站优化"网站优化/a

ul

li

a href="" title="SEO杂谈"SEO杂谈/a

/li

li

a href="" title="站长工具"站长工具/a

/li

li

a href="" title="经验分享"经验分享/a

/li

/ul

/li

li style="width: 50px;"

a href="" title="更多"i class="icon icon-align-justify"/i/a

ul

li

a href="" title="SEO杂谈"更多1/a

/li

li

a href="" title="更多2"更多2/a

/li

li

a href="" title="更多3"更多3/a

/li

/ul

/li

/ul

/div

script type="text/javascript"

$(window).load(function() {

$(".navbg").capacityFixed();

});

$(function() {

$("#navul  li").not(".navhome").hover(function() {

$(this).addClass("navmoon")

}, function() {

$(this).removeClass("navmoon")

})

var maxwidth = 580;

$(".news_text img").each(function() {

if($(this).width()  maxwidth) {

$(this).width(maxwidth);

}

});

});

function $tomato(id) {

return document.getElementById(id);

}

function runCode(obj) {

var winname = window.open('', "_blank", '');

winname.document.open('text/html', 'replace');

winname.document.writeln(obj.value);

winname.document.close();

}

(function($) {

$.fn.capacityFixed = function(options) {

var opts = $.extend({}, $.fn.capacityFixed.deflunt, options);

var FixedFun = function(element) {

var top = opts.top;

element.css({

"top": top

});

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if(scrolls  top) {

if(window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

} else {

element.css({

position: "absolute",

top: top

});

}

});

element.find(".close-ico").click(function(event) {

element.remove();

event.preventDefault();

})

};

return $(this).each(function() {

FixedFun($(this));

});

};

$.fn.capacityFixed.deflunt = {

right: 0,

top: 25

};

})(jQuery);

/script

/body

结果：

CSS如何实现网页导航栏置顶

1、在电脑上打开软件，新建一个html文件，在head部分，编写css样式， list-style-type: none;是除掉导航前面默认带的点，li a，li a.active ，li a:hover:not(.active) 设置鼠标滑到导航栏的颜色变化。

2、在html页面body里面编写导航栏内容，可以看到是通过ullia href=""/a/li/ul的格式来实现导航。

3、在浏览器中打开页面，可以看到已经制作成了一个比较美观的垂直导航栏。

4、将鼠标滑向垂直导航栏的列表项上，可以看到列表项颜色发生变化。

5、也可以制作成水平导航栏，overflow: hidden;代码的意思是超出高度和宽度的部分自动隐藏，float: left;使导航栏水平显示。

6、在浏览器中打开页面，可以看到制作出美观的水平导航栏，已经置顶了。

我用html做了一个导航栏，代码如下：

ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。

html下拉导航栏代码

这个是用JS实现的。你百度一下，JS实现二级导航源码就有了。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title简洁的纯CSS下拉菜单代码/title

style

#sddm

{ margin: 0 auto;

padding: 0;

z-index: 30;

background-color:#F4F4F4;

width: 480px;

height:23px;}

#sddm li

{ margin: 0;

padding: 0;

list-style: none;

float: left;

font: bold 12px arial}

#sddm li a

{ display: block;

margin: 0 1px 0 0;

padding: 4px 10px;

width: 60px;

background: #5970B2;

color: #FFF;

text-align: center;

text-decoration: none}

#sddm li a:hover

{ background: #49A3FF}

#sddm div

{ position: absolute;

visibility: hidden;

margin: 0;

padding: 0;

background: #EAEBD8;

border: 1px solid #5970B2}

#sddm div a

{ position: relative;

display: block;

margin: 0;

padding: 5px 10px;

width: auto;

white-space: nowrap;

text-align: left;

text-decoration: none;

background: #EAEBD8;

color: #2875DE;

font: 12px arial}

#sddm div a:hover

{ background: #49A3FF;

color: #FFF}

/style

!-- dd menu --

script type="text/javascript"

!--

var timeout = 100;

var closetimer = 10;

var ddmenuitem = 0;

// open hidden layer

function mopen(id)

{

// cancel close timer

mcancelclosetime();

// close old layer

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it

ddmenuitem = document.getElementById(id);

ddmenuitem.style.visibility = 'visible';

}

// close showed layer

function mclose()

{

if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

}

// go close timer

function mclosetime()

{

closetimer = window.setTimeout(mclose, timeout);

}

// cancel close timer

function mcancelclosetime()

{

if(closetimer)

{

window.clearTimeout(closetimer);

closetimer = null;

}

}

// close layer when click-out

document.onclick = mclose; 

// --

/script

/head

body style="text-align:center"

ul id="sddm"

lia href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()"Home/a

div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"HTML DropDown/a

a href="#"DHTML DropDown menu/a

a href="#"JavaScript DropDown/a

a href="#"DropDown Menu/a

a href="#"CSS DropDown/a

/div

/li

lia href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()"Download/a

div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"ASP Dropdown/a

a href="#"Pulldown menu/a

a href="#"AJAX dropdown/a

a href="#"DIV dropdown/a

/div

/li

lia href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()"Order/a

div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"Visa Credit Card/a

a href="#"Paypal/a

/div

/li

lia href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()"Help/a

div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"Download Help File/a

a href="#"Read online/a

/div

/li

lia href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()"Contact/a

div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"

a href="#"E-mail/a

a href="#"Submit Request Form/a

a href="" target="_blank"codefans.net/a

/div

/li

/ul

/body

/html

html水平导航栏代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于HTML导航栏代码、html水平导航栏代码的信息别忘了在本站进行查找喔。