图片-小白之家
图片-小白之家
图片-小白之家
图片-小白之家

css下拉菜单(css下拉菜单怎么做附代码)

<!DOCTYPEhtmlPUBLIC”-//W3C//DTDXHTML1.0Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<htmlxmlns=”http://www.w3.org/1999/xhtml”>

<head>

<metahttp-equiv=”Content-Type”content=”text/html;charset=utf-8″/>

<title>CSS下拉菜单</title>

<!–<linkrel=”stylesheet”type=”text/css”href=”nav1.css”/>–>

<!–<linkrel=”stylesheet”type=”text/css”href=”nav2.css”/>–>

</head>

<body>

<divclass=”menu”>

<ul>

<li>

<ahref=”#”>menu_0</a>

<ul>

<li><ahref=”#”>item_0</a></li>

<li><ahref=”#”>item_1</a></li>

<li><ahref=”#”>item_2</a></li>

<li><ahref=”#”>item_3</a></li>

<li><ahref=”#”>item_4</a></li>

</ul>

</li>

<li>

<ahref=”#”>menu_1</a>

<ul>

<li><ahref=”#”>item_5</a></li>

<li><ahref=”#”>item_6</a></li>

<li><ahref=”#”>item_7</a></li>

<li><ahref=”#”>item_8</a></li>

<li><ahref=”#”>item_9</a></li>

</ul>

</li>

<li>

<ahref=”#”>menu_2</a>

<ul>

<li><ahref=”#”>item_10</a></li>

<li><ahref=”#”>item_11</a></li>

<li><ahref=”#”>item_12</a></li>

<li><ahref=”#”>item_13</a></li>

<li><ahref=”#”>item_14</a></li>

</ul>

</li>

<li>

<ahref=”#”>menu_3</a>

<ul>

<li><ahref=”#”>item_15</a></li>

<li><ahref=”#”>item_16</a></li>

<li><ahref=”#”>item_17</a></li>

<li><ahref=”#”>item_18</a></li>

<li><ahref=”#”>item_19</a></li>

</ul>

</li>

<li>

<ahref=”#”>menu_4</a>

<ul>

<li><ahref=”#”>item_20</a></li>

<li><ahref=”#”>item_21</a></li>

<li><ahref=”#”>item_22</a></li>

<li><ahref=”#”>item_23</a></li>

<li><ahref=”#”>item_24</a></li>

</ul>

</li>

</ul>

</div>

<divstyle=”clear:left;”>Content!</div>

</body>

</html>

在不添加CSS的情况下,下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。
图片[1]-css下拉菜单(css下拉菜单怎么做附代码)-小白之家

两种实现下拉的方法的共同点在于:

1.必须将最外层的ul元素的padding属性设为0,以保证整个下拉菜单中的没有无序列表中的自动缩进。同时,将list-style-type设为none,以去除列表项前的标记。

2.如果主菜单需要横向,则需要把li元素设置为浮动元素,即float:left。

3.使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。

4.必须把二级列表的ul元素的position属性为absolute,以保证将该元素及其子元素从文件流中去除,这样一来当二级菜单显示的时候不会影响下面的其它元素。

5.下拉菜单后面的页面元素,需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素,如果不这样做的话后面的页面元素的位置将会不恰当。

6.需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。

不同点如前所述,即是:当一级菜单项没有焦点的时候,方法一会把二级菜单的ul元素的visibility属性设为hidden,使整个二级菜单不可见;当有焦点的时候,需要把相应的二级菜单的visibility属性改为visible,使其可见。而方法二则将需要不可见的二级菜单ul元素的display元素设为none,当需要可见的时候改为block。

上述状态的切换均通过伪类来完成而不调用JavaScript。

详细代码如下:

nav1.css(通过切换visibility属性)

.menu{

font-family:Arial,Helvetica,sans-serif;

width:455px;

margin:0auto;

}

.menuul{

padding:0;

list-style-type:none;

}

.menuulli{

float:left;

width:90px;

text-align:center;

line-height:30px;

background:#FC0;

border:#fff1pxsolid;

border-width:01px00;

}

.menuullia:link,.menuullia:visited{

text-decoration:none;

color:#000;

}

.menuulli:hover{

background:#F60;

}

.menuulli:hovera{

color:#fff;

}

.menuulliul{

visibility:hidden;

position:absolute;

width:90px;

}

.menuulli:hoverulli{

visibility:visible;

background:#F96;

color:#000;

width:90px;

}

.menuulliullia:link,.menuulliullia:visited{

color:#000;

}

.menuulliulli:hover{

background:#39F;

}

nav2.css(通过切换display属性)

.menu{

font-family:Georgia,”TimesNewRoman”,Times,serif;

margin:0auto;

width:505px;

}

.menuul{

padding:0;

list-style-type:none;

}

.menuulli{

float:left;

}

.menuullia:link,.menuullia:visited{

background:#3CF;

color:#000;

text-decoration:none;

display:block;

width:100px;

height:30px;

text-align:center;

}

.menuulli:hovera{

background:#009;

color:#fff;

font-weight:bold;

}

.menuulliul{

display:none;

}

.menuulli:hoverul{

display:block;

width:100px;

position:absolute;

}

.menuulliullia:link,.menuulliullia:visited{

background:#6FF;

color:#000;

}

.menuulliulli:hovera{

background:#60F;

color:#F60;

font-weight:bold;

},css下拉菜单怎么做附代码,在网站制作中,首先要做的便是主页的导航栏,导航栏一般都会用到下拉菜单,用来筛选子单元。下面是用CSS3的办法制导航栏的下拉菜单:

首先设置一个DIVtop-container作为导航栏,再在里边放一个DIVtop-nav用来放主导航,然后再设置4个divnav-btn-lv1

放一级菜单,每个一级菜单下边放无序列表产生子菜单:

class=”top-container”>

class=”top-nav”>

class=”nav-btn-lv1″>导航1

导航A

导航B

导航C

导航D

class=”nav-btn-lv1″>导航2

导航A

导航B

导航C

导航D

class=”nav-btn-lv1″>导航3

导航A

导航B

导航C

class=”nav-btn-lv1″>导航4

导航A

导航B

然后便是对div进行款式表的设置以及特效动画,首先将悉数款式的外边距及内边距设为0,并将列表前边的标志去掉。字体挑选微软雅黑,带暗影作用

*{

margin:0px;

padding:0px;

list-style:none;

font-family:”微软雅黑”;

text-shadow:#0000FF5px5px;

}

然后分别设置top-container和top-nav的宽高和布景色(为了分辨出div),将top-nav居中

.top-container{

width:100%;

height:40px;

background-color:#66AFE9;

}

.top-nav{

width:600px;

height:40px;

margin:0pxauto;

background-color:chartreuse;

}

然后再设置nav-btn-lv1的宽和最大高度,流布局,水平及垂直居中(用行高),超出部分躲藏(overflow)。

.nav-btn-lv1{

width:150px;

max-height:40px;

background-color:burlywood;float:left;

text-align:center;/*行高*/line-height:40px;

overflow:hidden;

}

然后设置nav-btn-lv1的鼠标点击特效(过渡作用及小手特效)

.nav-btn-lv1:hover{/*最大高度*/max-height:400px;/*过渡作用*/transition:1s;/*鼠标小手*/cursor:pointer;

}

再给列表加布景及下划线

.nav-btn-lv1li:hover{

background-color:yellow;

text-decoration:underline;

}

最终是让列表实线通明作用并且使导航栏出现圆角:

}

.nav-btn-lv1ul{

opacity:0.5;

}

.top-nav,.nav-btn-lv1{

border-radius:10px;

}

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容

图片-小白之家
图片-小白之家