Svislá vysouvací navigace v CSS 2

Fucza · Příspěvekod **Fucza** » 28 úno 2010 19:42

Zdravím. Chci se zeptat, co mám blbě, že se mi to nevysouvá (zřejmě nějaký problém s tím hoverem). Dělal jsem to podle tipu v Knize 333 tipů a triků pro CSS.

(X)HTML:
[syntax lang=xhtml]<div id="menu">
<ul>
<li><a href="index.html">Úvodní stránka</a></li>
<li><a href="#">Odkaz1</a>
<ul>
<li><a href="odkaz1A.html">Odkaz 1A</a></li>
<li><a href="odkaz1b.html">Odkaz 1B</a></li>
<li><a href="odkaz1C.html">Odkaz 1C</a></li>
</ul>
</li>
<li><a href="odkaz2.html/">Odkaz 2</a></li>
<li><a href="odkaz3.html">Odkaz 3</a></li>
</ul>

</div>[/syntax]

CSS:
[syntax lang=css]#menu ul {
width: 200px;
list-style-type: circle;
display: block;
}
#menu ul li {
position: relative;
}
#menu ul ul {
position: absolute;
left: 200px; top:0;
visibility: hidden;
}
#menu ul li: hover li {
visibility: visible;
}[/syntax]

Reklama

CZechBoY · Příspěvekod **CZechBoY** » 28 úno 2010 19:43

Takže k tvému tématu:
1) dej to do sekce Programování a tvorba webu
2) Používej syntax !!

k problému:
vysouvací menu se dělá pomocí JavaScriptu

Příspěvekod **Myloš** » 28 úno 2010 19:59

CZechBoY:
1+2) přesunul jsem to do správné sekce a vyměnil Code za Syntax.

Vysouvací menu se dělá i pomocí CSS – nutnost javascriptu je pouze historická, neboli 1) historické učebnice, návody a návyky a 2) existence 6. verze Exploreru, který umí :hover pouze nad odkazem (dá se obejít javascriptem pouze pro IE).

Fucza:

Vnořené submenu máš napozicované mimo rodiče, tzn. jakmile myší vyjedeš z nadřazené <li>, pochopitelně vnořené submenu zase zmizí. Abys to viděl, orámuj si pracovně všechny prvky pomocí * {border: 1px dashed red;}
V IE6 nebude fungovat, neboť umí :hover pouze pro prvky <a>. Hledej na webu hover.htc
Ve vyšších IE nebude fungovat, budou-li v quirku – viz vykreslovací módy

Fucza · Příspěvekod **Fucza** » 28 úno 2010 20:21

Czech boy, Myloš: Sorry a díky za přesun. Sedím u toho už 4 dny a přestává mi to myslet. Já tu sekci fakt neviděl.

Myloš: Ad 2,3 vím (Dokonce snad ani IE 7 by to umět neměla, pokud tam budou rámečky a vnitřní okraje)

No moc nechápu co myslíš. Podle toho, co je níže, by to tak právě mělo být. Mrkni na to prosím, jestli se mýlím. Díky

Příspěvekod **Myloš** » 28 úno 2010 20:57

Jedno takové menu jsem ti udělal – najdeš na adrese http://mfp.php5.cz/ukazky/menu/
Pokud shazuješ prohlížeče do quirku, nezapomeň z podmíněného komentáře vyhodit verzi IE, aby to HTC dostaly všechny verze.

CZechBoY · Příspěvekod **CZechBoY** » 01 bře 2010 09:44

Myloš: hele já tam nevidim v tom stylu třídu norek, ta tam nemá být nebo jak to je ? Pak bys tam ani to <ul class=norek> nemusel mít...

Fucza · Příspěvekod **Fucza** » 01 bře 2010 21:45

Díky za ten příklad. Ještě se mi to nedaří narvat na tu moji stránku a začínám mít v tom chaos. HTML kód obsauheje jen klasický vnořený seznam obalený v divu <div id="menu">. No teď mi vyjíždí ta druhá řada, ale je trochu níž než by měla a nemůžu přijít na to, kde je chyba.

[syntax lang=css]h1 {
font-size: 150%;
text-align: center;
}
h2 {
font-size: 125%;
text-align: center;
}
h3 {
font-size: 120%;
text-align: center;
}
p, ul, li {
font-size: 100%;
}

#menu ul li {list-style-type: none;
}
#menu li ul {list-style-type: none;
}
#menu li {margin-left: 15px; width: 150px; background-color: white; padding:2px; margin: 1px 0px 1px 15px;
position: relative; border: solid silver;}
#menu li ul {display: none;}
#menu li:hover ul, li.hover ul {
display: block;
color: black;
position: absolute;
margin-left: 100px; top: 0; left: 0px;
}
#menu li:hover, li.hover {background-color: black; color: white;}[/syntax]

Když by si se mrknul na ten příklad v té knížce, v čem tam je chyba?

Příspěvekod **Myloš** » 01 bře 2010 22:17

Zapomněli tam vynulovat marginy a paddingy.
S mírnou poupravou ten jejich příklad takhle:
[syntax lang="xhtml"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* STYLOPIS NAJDEŠ V SOUSEDNÍM OKNĚ, BO SYNTAX NEUMÍ BARVIT VNOŘENÉ JAZYKY
</style>
<div id="menu">
<ul>
<li><a href="#">Služby</a>
<ul>
<li><a href="#">Návrhy</a></li>
<li><a href="#">Vývrhy</a></li>
</ul>
</li>
<li><a href="#">Prodej</a>
<ul>
<li><a href="#">Barvy</a></li>
<li><a href="#">Larvy</a></li>
<li><a href="#">Laky</a></li>
<li><a href="#">Vlkodlaky</a></li>
</ul>
</li>
</ul>
</div>[/syntax]
[syntax lang=css]ul, li {margin: 0; padding: 0; list-style-type: none;}
li {background-color: silver; border: 1px solid black; margin-bottom: 1px; padding: 1px;}
#menu ul li:hover ul li {background-color: #fee;}
#menu ul {width: 100px;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; left: 100px; top: 0; visibility: hidden;}
#menu ul li:hover ul {visibility: visible;}
[/syntax]

Tohle mi fachčí v IE8 / Opera / Firefox

Fucza · Příspěvekod **Fucza** » 02 bře 2010 15:17

A ve starších IE by si doporučil JavaScript?

Příspěvekod **Myloš** » 02 bře 2010 18:09

Nemá smysl dělat dvě různá řešení. Stačí to původní mírně rozšíčit – v IE6 bych proto doporučil přidat hover.htc (viz výše). To funguje i v pětkových explorerech, ale na ty už bych beztak (pro jejich zastoupení v řádu promile) rezignoval.

Příspěvekod **Myloš** » 02 bře 2010 18:11

CZechBoY píše:Myloš: hele já tam nevidim v tom stylu třídu norek, ta tam nemá být nebo jak to je ? Pak bys tam ani to <ul class=norek> nemusel mít...

V zásadě tam být nemusí – jen jsem „norka“ zvolil pro jednodušší stylování vnořeného submenu, ale jde to i přes selektory potomků (li ul li).

Fucza · Příspěvekod **Fucza** » 04 bře 2010 07:39

Ahoj. Tak jsem to nějak splácal. O 2 pixely jsem tam zmenšil to místo, kam se bvysouvá ta nabídka. Dělalo to bordel, ty 1 +1 pixel rámečky, když jsem myší přejížděl do vysouvacího menu tak se to občas strácelo. Teď to zkouším v IE 7 a nestačím se divit. Když se menu vysune a sjíždím tím vysunutým menu tak při přechodu myší na třetí položku to menu zmizí. Sakra. Nevíš, čím by to mohlo být? Tu je ten maglajs CSS, pak sem začal mít chaos s dědičností a tak to je trochu humus a asi i spousta zbytečností (možná i dvojmo). Ale potřebuju to jen rozchodit, alespoň základně.
[syntax lang=css]/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: small;
margin: 0 ;
background: #D4ECFB;

}
h1, h2, h3, h4 {
font-family: Georgia, "Times New Roman", serif;
margin-top: 0;
}
h1 {
font-size: 150%;
margin: 0 0 10px 0;
}
#obsah h1 {
border-bottom: 1px dotted blue;
}
h2 {
font-size: 113%;
margin: 10px 0 5px 0;
}
h3 {
font-size: 110%;
margin: 10px 0 5px 0;
}
p, ul, a {
font-size: 100%;
}
p {
margin: 0 0 5px 0;
}
ul {
margin: 0 0 5px 20px;
}
#obsah ul {
margin: 0 0 5px 20px;
}

#obal {
width: 800px;
margin: 0 auto;

}
#obsah a {
font-weight: bold;
color: #blue;

}

#zahlavi {
width: 100%;
height: 200px;
background: blue url(obrazky/logo.jpg);
border bottom: 2px solid black;

}

#menu {
width: 25%;
float: left;
}
#obsah {
width: 75%;
float: right;
}
#obsah a, ul, li, p, h1, h2, h3, h4 {
margin: 15px;

}

#hlavni {
width: 100%;
float: left;
background: #ECECEC url(obrazky/pozadi.gif) repeat-y;
}
#zahlavi h1 {
display: none;
}
table, td, th {
border: 1px solid #333399;
border-collapse: collapse;
font-size: 95%;
}
td, th {
padding: 3px 5px;
}
th {
background: #333399;
color: white;
}
.seda {
background: #e0cece;
}
#obsah li {
list-style-type: circle;
}

#menu ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
background-color: silver;
border: 1px solid black;
margin-bottom: 0;
padding: 2px;

}
#menu ul li:hover ul li {
background-color: #fee;
}
#menu ul {
width: 200px;
}
#menu ul li {
position: relative;
}
#menu ul ul {
position: absolute;
left: 198px;
top: 0;
visibility: hidden;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu a {
display: block;
}
#menu a:hover {
color: white;
background: #333399;
font-weight: bold;
}
#menu .spodni {
border-bottom: 2px solid black;
}

table {
margin: 10px auto;

}
p {
text-align: justify;
}
img {
text-align: center;
}
#zapati {
width: 100%;
float: left;
background: #333399;
color: white;
}
#zapati p {
text-align: center ;
}
[/syntax]

PS: Jo a za boha nedám obrázky na střed. Ale na to přijdu a to prozatím tak nebolí:-)

Svislá vysouvací navigace v CSS 2

Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Re: Svislá vysouvací navigace v CSS 2

Kdo je online