Experimentální vysouvací hover menu bez skriptování
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
-
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024 -
Vstupte do éry umělé inteligence: ASOME Max Studio s AMD Ryzen™ 9 7940HS
14. listopadu 2023 -
inPage AI: Jak na generování obsahu
18. července 2024 -
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024
Jakub
Zář 13, 2010 v 17:14Firefoxu i Mozille :D :D :D
spis Mozille Firefox ne?
mailer
Zář 14, 2010 v 0:34Ty si nepamatujes prohlizec Mozilla?
Anonym
Led 13, 2011 v 12:59v IE (mám tu 7) to nefachčí
téma se řešilo tady: http://www.pixy.cz/pixylophone/2003_05_archiv.html#1053092647