Dropdown menu с помощта на CSS – Ангел Джорапов

По един от проектите, над които работих по спецификация трябваше да се направи падащо меню (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;
}

Работещ пример може да видите тук!

Вашият коментар