Dropdown menu с помощта на CSS
January 8th, 2008 January 8th, 2008 Posted in CSS, Уеб дизайнNo Comments »
По един от проектите, над които работих по спецификация трябваше да се направи падащо меню (dropdown menu). И тъй като select тага, който е стандартно решение в случая, не позволява максимално стилизиране и сливане с останалата част от дизайна, прибягнах до употребата на друго решение. В основата му е използването на стандартен html списък (< ul >< li >1< /li >>< li >2< /li >< /ul >) и със помощта на CSS му предадох желания вид, вписващ се в цялостния дизайн на страницата. Използвал съм и два реда javascript код, с който се променя стойността на display свойството на списъка при възникване на събитие – в случая onmouseover и onmouseout.
Ето и примерен код:
HTML файл:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" lang="en-us"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Dropdown menu example with using of standard html list and CSS</title>
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript">
function showLang(id) {
document.getElementById(id).style.display = 'block';
}
function hideLang(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<div id="wrapper">
<ul id="langBar">
<li id="langBarSelect"
onmouseover="showLang('selectLang'); return false;"
onclick="showLang('selectLang'); return false;"
onmouseout="hideLang('selectLang'); return false;">
<span>Change Language</span>
<img src="flags/arrow.png" alt="arrow" />
<ul id="selectLang"
onclick="showLang('selectLang'); return false;"
onmouseout="hideLang('selectLang'); return false;">
<li>
<a href="/uk/">
<img src="flags/uk.png" alt="uk flag" /> english
</a>
</li>
<li>
<a href="/sp/">
<img src="flags/spain.png" alt="es flag" /> espanol
</a>
</li>
<li>
<a href="/bg/">
<img src="flags/bg.png" alt="bg flag" /> български
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS файл (main.css):
* { padding: 0; margin: 0; }
body {
color: #333;
font: 12px normal "Arial Narrow", Arial, sans-serif ;
background:url(../im/bgr-body.png) top repeat-x;
background: #E6F4FE;
}
img { border:0;}
#wrapper {
margin: 50px auto;
width: 480px;
height: 480px;
border:1px solid #21407c;
background-color:#016EB6;
}
#langBar {
margin: 0 auto;
display:block;
padding: 0;
margin: 50px auto;
list-style: none;
width:120px;
height:15px;
border:1px solid #21407c;
color:#21407c;
font-size:10px;
}
#langBarSelect {
display:block;
width:120px;
height:15px;
position: relative;
background: #E6F4FE;
float:left;
}
#langBarSelect span {
width: 100px;
float:left;
display:block;
margin: 1px 0 0 5px;
_margin: 1px 0 0 2px; /* IE 6 style */
text-align: left;
}
#langBarSelect img {
margin: 2px 1px 0 0;
float:right;
display:block;
}
#selectLang {
border:1px solid #21407c;
margin: -1px;
display: none;
width: 120px;
position: absolute;
left:0;
top:0;
list-style: none;
}
#selectLang li a {
display:block;
width: 115px;
background: #E6F4FE;
padding: 3px 0 3px 5px;
text-decoration:none;
color:#21407c;
}
#selectLang li a:hover {
background: #FFCC03;
color:#21407c;
}
#selectLang li a img{
border:0;
padding: 0 5px 0 0;
float:left;
}
Работещ пример може да видите тук!
.