Experimentální vysouvací hover menu bez skriptování

10. ledna 2005

Menu je plně XHTML 1.0 Strict a případně i XHTML 1.1 validní, stejně jako CSS validní. Funguje v Opeře, MSIE, Firefoxu i Mozille. Menu je vystavěno bez jakéhokoli využití skriptů (JavaScript ani Behavior není použit).

Sémantika tohoto menu je také v pořádku, protože tabulková stavba je využita pouze pro MSIE (skryta před jinými prohlížeči i roboty) a pro ostatní prohlížeče a boty je již použito klasické „li“ menu.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Venimus. Bližší popis najdete v článku Pure CSS menus.

<!– ?xml version=“1.0″ encoding=“windows-1250″? –>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“cs“ lang=“cs“>
<head>
<meta http-equiv=“Content-Language“ content=“cs“/>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″/>
<title>Test hover menu</title>
<!–[if IE ]>
<style type=“text/css“ id=“default“ title=“default“ >
div#menu *
{
cursor: pointer;
}
.disabled
{
color: red !important;
background: none !important;
}
div#menu
{
background: #dddddd;
height: 15px;
white-space: nowrap;
width: 100%;
position:relative;
}
div#menu .a
{
background: #dddddd;
color: #000000;
font-weight:bold;
text-decoration: none;
}
div#menu .a table
{
display: block;
font-weight:bold;
}
div#menu table, div#menu table a
{
display: none;
}
div#menu .a:hover, div#menu div.menuitem:hover
{
margin-right:0px;
}
div#menu .a:hover table, div#menu div.menuitem:hover table
{
background: #dddddd;
display: block;
position: absolute;
top:20px;
}
div#menu .a:hover table a, div#menu div.menuitem:hover table a
{
color: black;
display: block;
padding: 0px 12px;
text-decoration: none;
white-space: nowrap;
}
div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover
{
background: #dddddd;
color: blue;
display: block;
padding: 0px 12px;
text-decoration: none;
}
td
{
border-width: 0px;
padding: 0px 0px 0px 0px;
}
.menuitem
{
float: left;
margin: 1px 1px 1px 1px;
padding: 1px 1px 1px 1px;
margin-right:50px;
}
.menuitem *
{
margin-right:20px;
}
#other
{
height: auto;
visibility: visible;
}
#holder
{
width: 100%;
}
#skryto
{
display: none;
}
/*Skryti menu pro ostatni prohlizece nez IE*/
</style>
</head>
<body>
<table id=“holder“>
<tr>
<td id=“other“>
<div id=“menu“>
<div class=“menuitem“>
<a class=“a“ href=“#“>Hlavní odkaz 1<br />
<object><table>
<tr>
<td><a href=“#2″>Pododkaz 11</a></td>
</tr>
<tr>
<td><a href=“#3″>Pododkaz 12</a></td>
</tr>
</table></object></a>
</div>
<div class=“menuitem“>
<a class=“a“ href=“#“>Hlavní odkaz 2<br />
<object><table>
<tr>
<td><a href=“#2″>Pododkaz 21</a></td>
</tr>
<tr>
<td><a href=“#3″>Pododkaz 22</a></td>
</tr>
</table></object></a>
</div>
</div>
</td>
</tr>
</table>
<div id=“skryto“>
<![endif]–>
<style type=“text/css“>
ul#mainMenu, ul
{
color:black;
background-color:#dddddd;
height:30px;
padding:0;
margin:0;
list-style-type:none;
}
ul#mainMenu ul
{
margin-top:3px;
}
ul#mainMenu li
{
float:left;
padding:6px;
width:150px;
cursor:pointer;
text-align:left;
}
ul#mainMenu li ul li
{
text-align:left;
}
ul#mainMenu a
{
color:black;
background-color:#dddddd;
display:block;
text-decoration:none;
font-weight:bold;
}
ul#mainMenu ul a
{
border-bottom:none;
border-left:10px solid #dddddd;
border-right:2px solid #dddddd;
padding-left:2px;
}
ul#mainMenu ul a:hover
{
color:blue;
border-left:10px solid #dddddd;
border-right:1px solid #dddddd;
}
ul#mainMenu li a:hover ul a:hover
{
color:blue;
}
ul#mainMenu ul
{
position:absolute;
visibility:hidden;
border-bottom:1px solid white;
background-color:white;
}
ul#mainMenu li:hover ul, ul#mainMenu li.hover ul
{
visibility:visible;
}
ul#mainMenu li li
{
float:none;
border:none;
padding:0;
}
</style>
</head>
<body>
<ul id=“mainMenu“>
<li><a href=“#“>Hlavní odkaz 1</a>
<ul>
<li><a href=“#“>Pododkaz 11</a></li>
<li><a href=“#“>Pododkaz 12</a></li>
</ul>
</li>
<li><a href=“#“>Hlavní odkaz 2</a>
<ul>
<li><a href=“#“>Pododkaz 21</a></li>
<li><a href=“#“>Pododkaz 22</a></li>
</ul>
</li>
</ul>
<!–[if IE ]>
</div>
<![endif]–>
</body>
</html>

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. Jakub

    Zář 13, 2010 v 17:14

    Firefoxu i Mozille :D :D :D
    spis Mozille Firefox ne?

    Odpovědět
  2. mailer

    Zář 14, 2010 v 0:34

    Ty si nepamatujes prohlizec Mozilla?

    Odpovědět
  3. Anonym

    Led 13, 2011 v 12:59

    v IE (mám tu 7) to nefachčí
    téma se řešilo tady: http://www.pixy.cz/pixylophone/2003_05_archiv.html#1053092647

    Odpovědět

Napsat komentář: Jakub Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *