html中伸缩菜单是怎么做出来的

html-css024

html中伸缩菜单是怎么做出来的,第1张

html中伸缩菜单，靠当独的一个html或者是css做不出来的，一般是结合jQ或者是js来实现，这里我就用JS来举例吧，主要是做好一个目录，一般是用ul、li去布局好就行，然后在给一个id，在通过Js去获取对象，然后设置鼠标的hover事件就可以了，这里我提交代码：

<!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>简洁实用的二级下拉导航菜单</title>

<meta http-equiv="content-type" content="text/htmlcharset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

body,html{padding:0margin:0text-align:centerfont:normal 14px 'arial'}

#mainNavBar{width:100%background:#999padding:10px 0}

#nav{width:760pxheight:30pxmargin:0 auto}

#nav ul{padding:0margin:0}

#nav ul li{position:relativefloat:leftwidth:60pxheight:30pxline-height:30pxoverflow:hiddenlist-style-type:none}

#nav ul li a{display:blockcolor:#ffftext-decoration:none}

#nav ul li a:hover{font-weight:boldbackground:#666}

#subNav{position:absolutewidth:150pxtop:30pxleft:0pxpadding:5pxbackground:#666color:#ffftext-align:left}

#subNav a{text-decoration:nonefont-weight:normaldisplay:block}

#subNav a:hover{color:#f00background:#f00}

</style>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="mainNavBar">

<div id="nav">

<ul>

<li>

<a href="#">Add</a>

<div id="subNav">

<a href="#">写日志</a>

<a href="#">增加分类</a>

</div>

</li>

<li>

<a href="#">Edit</a>

<div id="subNav">

<a href="#">修改分类</a>

<a href="#">文章编辑</a>

</div>

</li>

<li>

<a href="#">Admin</a>

<div id="subNav">

<a href="#">文章管理</a>

<a href="#">评论管理</a>

<a href="#">留言管理</a>

<a href="#">退出</a>

</div>

</li>

</ul>

</div>

</div>

<script language="javascript">

var nav=document.getElementById("nav").getElementsByTagName("li")

for(i=0i<nav.lengthi++){

nav[i].onmouseover=function(){

this.style.fontWeight="bold"

this.style.overflow="visible"

this.style.background="#666666"

}

nav[i].onmouseout=function(){

this.style.fontWeight="normal"

this.style.background="#999999"

this.style.overflow="hidden"

}

}

</script>

</body>

</html>

#header #shousuo{

width:950px

height:50px

background:#f4f4f4

margin-top:10px

}

#shousuo ul li{

line-height:50px

list-style-type:none

float:left

margin-left:5px

font-weight:bold

font-size:14px

标题可伸缩说明width属性不是具体的值而是百分比，背景如果是纯色不受影响，背景如果是图片，图片的width必须设为百分比，代码如下：

1、背景是颜色

<h1 style="width:100%background-color:#FFFFFF">这是标题1</h1>

2、背景是图片

<h1 style="width:100%background-image:url(图片路径)background-size:100% 100%background-repeat:no-repeat">这是标题1</h1>

属性用于调整主轴上伸缩的位置。可能的值为：

flex-start (默认)

flex-end

center

space-between

space-around

这里我们设置justify-content为center

align-items 侧轴对齐

align-items是一个和justify-content相呼应的属性。align-items

......