css二级菜单样式如何设置

2023-03-04 07:50:02html-css05

css二级菜单样式如何设置,第1张

代码粘贴的太复杂；

先给你分析一下原理：二级菜单没有在没有hover属性的情况下是隐藏的所以需要display：none，当鼠标hover的时候二级菜单才会列出来，这是纯css可以实现的；

知道上面的原理之后，下面比较容易实现具体看例子：

HTML代码：

<ul>

</ul>

</li>

</ul>

CSS代码：

ul li ul.drop-ul{ display: noneposition:relative }/*正常情况下隐藏*/

ul li:hover ul.drop-ul li{display: block} /*当鼠标放上去二级菜单li 显示出来*/

/*这个时候你会发现二级菜单显示的位置可能不对可以使用position属性*/

ul li:hover ul.drop-ul li{position:absolute}

/*通过top right left 调整位置，根据实际情况调整背景颜色，字体颜色等，细节东西*/

此时可能会发现会二级菜单出现有那么一点点的生硬；没关系配合jquery实现缓慢展现效果

$(document).ready(function() {

if($(window).width() > 768) {

$('ul li').hover(

function() {

$('ul', this).stop().slideDown(200)

function() {

$('ul', this).stop().slideUp(200)

}

)

}

})

注意不知道jquery的新手使用记住先加载Jquery.min.js文件，放在此段js前面；

<html>

<head>

<title>简易的JS+CSS树状二级菜单tree丨芯晴网页特效丨CsrCode.Cn</title>

function showhide_obj(obj,icon)

{

obj=document.getElementById(obj)

icon=document.getElementById(icon)

if (obj.style.display=="none")

{

//指定文档中的对象为div,仅适用于IE

div_list = document.getElementsByTagName("div")

for (i=0i<div_list.lengthi ++)

{

thisDiv = div_list[i]

if(thisDiv.id.indexOf("title")!=-1)//当文档div中的id含有list时,与charAt类似

{

//循环把所有菜单链接都隐藏起来

thisDiv.style.display="none"

icon.innerHTML = "+"

}

myfont=document.getElementsByTagName("font")

for(i=0i<myfont.lengthi++)

{

thisfont = myfont[i]

}

icon.innerHTML="-"

obj.style.display=""//只显示当前链接

}

else

{

//当前对象是打开的，就关闭它

icon.innerHTML="+"

obj.style.display="none"

}

function show_this(obj)

{

obj=document.getElementById(obj)

if (obj.id==obj.id)

{

blinkicon=document.getElementsByTagName("font")

for(x=0x<blinkicon.lengthx++)

{

if( blinkicon[x].id.indexOf("select")!=-1 &&obj.id!=obj )

{

blinkicon[x].innerHTML=" "

}

obj.innerHTML=">"

}

else

{

obj.innerHTML=" "

}

//-->

</script>

span{ width:100pxHeight:25pxmargin-left:15px}

font{font-weight:bold}

body,td{font-family:Verdana, Arial, Helvetica, sans-seriffont-size:12pxcolor:#000000}

div{cursor:defaultborder-top:1px solid gray border-left:1px solid gray border-right:1px solid graybackground-color:#F6F6F6 width:200px}

pre{background-color:#FFFFF1border:1px solid graycolor:bluefont-family:verdanaArialpadding:20px}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

<p align="center">本特效由 <a href="http://www.CsrCode.cn">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p>

先占位。

left:-999em：

em是一个相对长度单位，它是相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

left是定位中的一个属性，就是说当前对象的最左边位置相对于父对象（父对象没有定义相对定位时则为body）左边位置的距离。这里取很大的999em是为了将ul放在一个不在父对象可视区域的位置，从而达到隐藏的目的。

至于修改二级菜单的位置，见下面代码中的注释。

javascript意思如下：

function menuFix() {

// 获取id为nav这个标签下的所有li标签，

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

// 循环为前面得到的每个li标签绑定事件

for (var i=0i<sfEls.lengthi++) {

sfEls[i].onmouseover=function() {// 绑定鼠标经过事件，在鼠标经过此li时触发此方法并执行此函数

//this.className就是当前循环到的这个li的class属性值

//这句代码的意思就是当这个li的class属性值为空的时候，给它的class值加上一个值sfhover

//也就是说，假设li的class=""，则鼠标经过时调用这段代码，它的class值就变成了class="sfhover"

//当class的值不为空的时候，就给这个li的class值加上一个空格，再加上sfhover

//因为当li的class不为空，说明它本身已经有一个class值，要再添加一个样式，应该用空格隔开

//所以就是先加一个空格，再加sfhover，例如li的class="a"，则执行这段代码后就成了class="a sfhover"

// 下面几个方法中的代码和这个代码的处理是一样的，就不做说明了。

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseDown=function() {//给当前li添加鼠标按下事件，当鼠标在这个li上按下的时候触发这个事件并执行此函数

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseUp=function() {//给当前li添加鼠标放开事件，即原本鼠标是按下状态，松开鼠标后触发此事件并执行此函数

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onmouseout=function() {// 给当前li添加鼠标移开事件，即原本鼠标在这个li上，鼠标从这个li的范围移开时触发此事件并执行此方法

//这个处理和前面的不一样，它的意思是，取到当前li原来的class属性值，将这个属性值中的所有sfhover都替换成空字符串，也就相当于去掉所有sfhover

//假定经过前面一系列事件后，这个li的class="a sfhover sfhover"，经过这个函数后，它的class就会变回class="a"

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"")

}

window.onload=menuFix

在html里添加一个ul就可以用了，添加规则如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

function menuFix() {

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

for (var i=0i<sfEls.lengthi++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"")

}

window.onload=menuFix

//--><!]]></script>

<style>

#nav {line-height: 30px list-style-type: nonebackground:#F00}

#nav a {display: blockwidth: 80pxtext-align:center}

#nav a:link {color:#F00text-decoration:none}

#nav a:visited {color:#F00text-decoration:none}

#nav a:hover {color:#F00text-decoration:nonefont-weight:bold}

#nav li {float: leftwidth: 80pxbackground:#CCC}

#nav li a:hover{background:#999}

#nav li ul {line-height: 27px list-style-type: nonetext-align:leftleft: -999emwidth: 180pxposition: absolutebackground-color:black}/*我给它加了个背景色*/

#nav li ul li{float: leftwidth: 100pxbackground: #F6F6F6}

#nav li ul a{display: blockwidth: 100pxtext-align:leftpadding-left:24px}

#nav li ul a:link {color:#666text-decoration:none}

#nav li ul a:visited {color:#666text-decoration:none}

#nav li ul a:hover {color:#F3F3F3text-decoration:nonefont-weight:normalbackground:#C00}

#nav li:hover ul {left: autodisplay:block}/*修改这个left的值可以修改位置，大概改为-40px可以喝顶级菜单左对齐，你也可以换成其他数字，比如-30px、-20px等*/

#nav li.sfhover ul {left: autodisplay:block}/*这个left的值和上一个一样就行了*/

</style>

<BODY>

<li>

<ul>

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

</ul>

</li>

<li>

<ul>

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

</ul>

</li>

<li>

<ul>

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

</ul>

</li>

<li>

<ul>

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

</ul>

</li>

</ul>

</BODY>

</HTML>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：重装完系统后还要做什么？

# 下一篇：JS完整打野天赋及符文LOL

推荐阅读

热门文章

最新发布

标签列表

css二级菜单样式如何设置

给您推荐相同类型的内容：