上一篇
下一篇
收集两款链接菜单样式(div+css)
发布:Admin 日期:2006-08-11
从cssplay看到的，感觉蛮有创意就整理了一下（也称不上什么整理，就算记录吧，看着方便点），主要是利用在链接的左右使用<span>标签，在css中定义其显示隐藏以及位置来达到效果，关键看你有没有好的想法。
1. 标记访问过的链接的菜单
访问过的链接后会出现你指定的文字，比如例子中的visited。
css代码：
xhtml代码：
2. 带描述框的链接菜单
鼠标经过链接时会在链接右边出现描述框
css代码：
xhtml代码：
1. 标记访问过的链接的菜单
访问过的链接后会出现你指定的文字，比如例子中的visited。
css代码：
/*CASCADING STYLE SHEET*/
#menu {
width:8em;
padding:0.5em;
background:#ccc;
margin:0 auto;
}
#menu a, #menu a:visited {
display:block;
width:7em;
padding:0.25em 0;
color:#000;
text-indent:0.2em;
background-color:#fff;
text-decoration:none;
margin:0.5em 0;
border-left:0.5em solid #9ab;
}
#menu a:visited span {
display:block;
position:absolute;
top:0;
left:10em;
width:5em;
font-size:0.9em;
color:#c00;
border:1px solid #c00;
}
#menu a span {
display:none;
}
#menu a:hover {
color:#f00;
border-left:0.5em solid #000;
}
.box {
position:relative;
}
#menu {
width:8em;
padding:0.5em;
background:#ccc;
margin:0 auto;
}
#menu a, #menu a:visited {
display:block;
width:7em;
padding:0.25em 0;
color:#000;
text-indent:0.2em;
background-color:#fff;
text-decoration:none;
margin:0.5em 0;
border-left:0.5em solid #9ab;
}
#menu a:visited span {
display:block;
position:absolute;
top:0;
left:10em;
width:5em;
font-size:0.9em;
color:#c00;
border:1px solid #c00;
}
#menu a span {
display:none;
}
#menu a:hover {
color:#f00;
border-left:0.5em solid #000;
}
.box {
position:relative;
}
xhtml代码：
<!--XHTML-->
<div id="menu">
<div class="box">
<a href="http://www.macrolong.com" target="_blank">
menu one
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://blog.macrolong.com" target="_blank">
menu two
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://free.macrolong.com" target="_blank">
menu three
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://mephp.com" target="_blank">
menu four
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://bbs.mephp.com" target="_blank">
menu five
<span>
VISITED
</span>
</a>
</div>
</div>
<div id="menu">
<div class="box">
<a href="http://www.macrolong.com" target="_blank">
menu one
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://blog.macrolong.com" target="_blank">
menu two
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://free.macrolong.com" target="_blank">
menu three
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://mephp.com" target="_blank">
menu four
<span>
VISITED
</span>
</a>
</div>
<div class="box">
<a href="http://bbs.mephp.com" target="_blank">
menu five
<span>
VISITED
</span>
</a>
</div>
</div>
2. 带描述框的链接菜单
鼠标经过链接时会在链接右边出现描述框
css代码：
/*CASCADING STYLE SHEET*/
#menu {
width:100px;
text-align:center;
position:relative;
}
.box {
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
background-color:#fff;
color:#c00;
display:block;
width:88px;
height:16px;
font-size:14px;
border:1px solid #fff;
padding:5px;
}
* html #menu a, * html #menu a:visited {
width:100px;
height:28px;
w\idth:88px;
he\ight:16px;
}
#menu a span {
display:none;
}
#menu a:hover {
border:1px solid #000;
}
#menu a:hover span.left,
#menu a:hover span.right {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left {
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:87px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
#menu a:hover span.lk {
display:block;
position:absolute;
left:120px;
top:0;
padding:5px;
width:100px;
background-color:#fff;
color:#000;
border:1px solid #234;
}
#menu {
width:100px;
text-align:center;
position:relative;
}
.box {
position:relative;
}
#menu a, #menu a:visited {
text-decoration:none;
background-color:#fff;
color:#c00;
display:block;
width:88px;
height:16px;
font-size:14px;
border:1px solid #fff;
padding:5px;
}
* html #menu a, * html #menu a:visited {
width:100px;
height:28px;
w\idth:88px;
he\ight:16px;
}
#menu a span {
display:none;
}
#menu a:hover {
border:1px solid #000;
}
#menu a:hover span.left,
#menu a:hover span.right {
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left {
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:87px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
#menu a:hover span.lk {
display:block;
position:absolute;
left:120px;
top:0;
padding:5px;
width:100px;
background-color:#fff;
color:#000;
border:1px solid #234;
}
xhtml代码：
<!--XHTML-->
<div id="menu">
<div class="box">
<a href="#">Item 1
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 1
</span>
</a>
</div>
<div class="box">
<a href="#">Item 2
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 2
</span>
</a>
</div>
<div class="box">
<a href="#">Item 3
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 3
</span>
</a>
</div>
<div class="box">
<a href="#">Item 4
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 4
</span>
</a>
</div>
<div class="box">
<a href="#">Item 5
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 5
</span>
</a>
</div>
</div>
<div id="menu">
<div class="box">
<a href="#">Item 1
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 1
</span>
</a>
</div>
<div class="box">
<a href="#">Item 2
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 2
</span>
</a>
</div>
<div class="box">
<a href="#">Item 3
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 3
</span>
</a>
</div>
<div class="box">
<a href="#">Item 4
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 4
</span>
</a>
</div>
<div class="box">
<a href="#">Item 5
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 5
</span>
</a>
</div>
</div>
文章来自: 
引用通告: 
Tags: 评论: 1 | 引用: 0 | 查看次数: 11353
发表评论
