HTML案例—很討巧的一種js+css製做hover模式展現二級菜單方法

時間 2019-11-21

標籤 html 案例討巧一種 js+css css 製做 hover 模式展現二級菜單方法欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用css減小js的邏輯使用</title>
<style type="text/css">
body
{
padding: 0;
font-size: 10pt;
behavior:url(css/csshover.htc);
}
.topmenu
{
display: block;
width: 220px;
border: 2px solid #e4393c;
margin: 0;
padding: 0;
}
.toptitle
{
height: 40px;
line-height: 40px;
text-align: left;
font-size: 11pt;
font-weight: bold;
color: White;
background: #e4393c;
padding-left: 20px;
}
.topmenu li
{
height: 30px;
line-height: 30px;
font-size: 11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(http://img.mukewang.com/5411027300014f0200220030.jpg);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a
{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover
{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu .lihover /*鼠標移動到上面時，應用的樣式*/
{
border: 1px solid #DDD;
border-right: 0;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image: none;
height:60px;
border-left:4px solid #e4393c;

/*極其討巧的一個方法：css裏寫好樣式，只有添加了lihover這個樣式，那個lihover span的選擇器纔會生效。不添加lihover這個類名，.lihover soan/.lihover .div 這些lihover下的style不會生效。*/
}
.topmenu .lihover .submenu /*懸浮層，這種狀況下不使用lihover這個類名的話，。submenu也應用不了樣式。而後還會是隱藏的樣式。*/
{
display: block;
}

.topmenu .lihover span /*白色小方框沒有lihover。span的樣式也加不上去，span標籤就是一個小圓點，咱們也看不到他。*/
{
background: white;
display: inline-block;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
}

.topmenu li b
{
display:none;

}

.topmenu .lihover b
{
display:block;
height:30px;
line-height:30px;
font-weight:normal;
font-size:10pt;
}

.submenu
{
display: none;
width: 715px;
left: 220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background: white;
box-shadow: 0 0 8px #DDD;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.leftdiv
{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv
{
float: left;
width: 200px;
margin: 5px;
}

.leftdiv dl
{
display: block;
border-bottom: 1px solid #EEE;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt
{
display: block;
float: left;
width: 60px;
text-align: right;
height: 22px;
line-height: 22px;
padding-right: 6px;
}

.leftdiv dl dt a
{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10pt;
}
.leftdiv dl dd
{
display: block;
overflow: hidden;
}
.leftdiv dl dd a
{
display: block;
float: left;
border-left: 1px solid #CCC;
color: #737373;
font-size: 9pt;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}

.rightdiv dl dd
{
margin: 3px 0;
}

.rightdiv dl dt
{
color: #e4393c;
font-weight: bold;
font-size: 10pt;
}

.rightdiv dl dd a
{
font-size: 9pt;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover
{
color: #737373;
font-weight: normal;
}

.rightPic
{
position:relative;
right:-35px;
bottom:-30px;

}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].i = i;
aLi[i].onmouseover = function(){
this.className = "lihover";
//添加了lihover這個樣式，那個lihover span的選擇器纔會生效。
}
aLi[i].onmouseout = function(){
this.className = "";
}
}

}
</script>
<ul class="topmenu">
<div class="toptitle">
所有商品分類
</div>
<li><a href="#">圖書、音像、數字商品</a><span></span>
<div class="submenu">
<div class="leftdiv">
<dl>
<dt><a href="#">電子書</a></dt>
<dd>
<a href="#">免費</a> <a href="#">小說</a> <a href="#">勵志與成功</a> <a href="#">婚戀/兩性</a>
<a href="#">文學</a> <a href="#">經管</a> <a href="#">暢讀VIP</a>
</dd>
</dl>
<dl>
<dt><a href="#">數字音樂</a></dt>
<dd>
<a href="#">通俗流行</a> <a href="#">古典音樂</a> <a href="#">搖滾說唱</a> <a href="#">爵士藍調</a>
<a href="#">鄉村民謠</a> <a href="#">有聲讀物</a>
</dd>
</dl>
<dl>
<dt><a href="#">音像</a></dt>
<dd>
<a href="#">音樂</a> <a href="#">影視</a> <a href="#">教育音像</a> <a href="#">遊戲</a>
</dd>
</dl>
<dl>
<dt><a href="#">文藝</a></dt>
<dd>
<a href="#">小說</a> <a href="#">文學</a> <a href="#">青春文學</a> <a href="#">傳記</a> <a
href="#">藝術</a>
</dd>
</dl>
<dl>
<dt><a href="#">人文社科</a></dt>
<dd>
<a href="#">歷史</a> <a href="#">心理學</a> <a href="#">政治/軍事</a> <a href="#">國學/古籍</a>
<a href="#">哲學/宗教</a> <a href="#">社會科學</a>
</dd>
</dl>
<dl>
<dt><a href="#">經管勵志</a></dt>
<dd>
<a href="#">經濟</a> <a href="#">金融與投資</a> <a href="#">管理</a> <a href="#">勵志與成功</a>
</dd>
</dl>
<dl class="fore7">
<dt><a href="#">生活</a></dt>
<dd>
<a href="#">家教與育兒</a> <a href="#">旅遊/地圖</a> <a href="#">烹飪/美食</a> <a href="#">時尚/美妝</a>
<a href="#">家居</a> <a href="#">婚戀與兩性</a> <a href="#">娛樂/休閒</a> <a href="#">健身與保健</a>
<a href="#">動漫/幽默</a> <a href="#">體育/運動</a>
</dd>
</dl>
<dl>
<dt><a href="#">科技</a></dt>
<dd>
<a href="#">科普</a> <a href="#">IT</a> <a href="#">建築</a> <a href="#">醫學</a> <a href="#">
工業技術</a> <a href="#">電子/通訊</a> <a href="#">農林</a> <a href="#">科學與天然</a>
</dd>
</dl>
<dl>
<dt><a href="#">少兒</a></dt>
<dd>
<a href="#">少兒</a> <a href="#">0-2歲</a> <a href="#">3-6歲</a> <a href="#">7-10歲</a>
<a href="#">11-14歲</a>
</dd>
</dl>
<dl>
<dt><a href="#">教育</a></dt>
<dd>
<a href="#">教材</a> <a href="#">中小學教輔</a> <a href="#">考試</a> <a href="#">外語學習</a>
</dd>
</dl>
<dl>
<dt><a href="#">其它</a></dt>
<dd>
<a href="#">英文原版書</a> <a href="#">港臺圖書</a> <a href="#">工具書</a> <a href="#">套裝書</a>
<a href="#">雜誌/期刊</a>
</dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dd>
<a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
width="194" height="70" title="\家電">
</a>
</dd>
<dd>
<a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
<img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
width="194" height="70" title="小家電--三請聚寶盆">
</a>
</dd>
</dl>
<dl>
<dt>推薦品牌</dt>
<dd>
<a href="#">美的官方旗艦店</a>
</dd>
<dd>
<a href="#">蘇泊爾旗艦店</a>
</dd>
<dd>
<a href="#">九陽旗艦店</a>
</dd>
<dd>
<a href="#">東菱旗艦店</a>
</dd>
<dd>
<a href="#">海爾統帥旗艦店</a>
</dd>
<dd>
<a href="#">小熊旗艦店</a>
</dd>
</dl>
<img src="wii.png" class="rightPic" />
</div>
</div>
</li>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機、數碼</a></li>
<li><a href="#">電腦、辦公</a></li>
<li><a href="#">家居、傢俱、家裝、廚具</a></li>
<li><a href="#">服飾內衣、珠寶首飾</a></li>
<li><a href="#">個護化妝</a></li>
<li><a href="#">鞋靴、箱包、鐘錶、奢侈品</a></li>
<li><a href="#">運動戶外</a></li>
<li><a href="#">汽車用品</a></li>
<li><a href="#">母嬰、玩具樂器</a></li>
<li><a href="#">食品飲料、酒類、生鮮</a></li>
<li><a href="#">養分保健</a></li>
</ul>
</body>
</html>javascript