| Autor | Zpráva | ||
|---|---|---|---|
| Elxan Profil * |
#1 · Zasláno: 4. 4. 2015, 08:42:01
Zdravím. Právě tady bojuji s problémem. Mám ve WordPressu rozbalovací horizontální menu. Ale rozbaluje se mě jen jedna podkategorie. Jak bych měl nastavit níže uvedeé CSS, aby se mohlo rozbalovat další podkategorie vždy napravo? Takže hlavní kategorie mám nahoře. Další úroveň se rozbaluje směrem dolu a dal bude 1-3 úrovně, které potřeba ozbalit do strany :-(
Snažím se pomoci ve vplné chvilce pomoci udělat web jedné neziskovce, ale tady jsem narazil a nevím na koho se obrátit o radu. V CSS sice něco málo umím, ale tohle prostě nedávám :-( Zde náhled jak by to mělo vypadat: Podklad mám modrý a druhou úroveň dole s bíím podkladem. Nevím ovšem jak tam dostat už třetí úroveň (šedý podklad na obr.). 
Předem děkuji za případnou pomoc... #menu-bar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 45px;
line-height: 100%;
background: #FE8111;
position:relative;
z-index:999;
}
#menu-bar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-family: arial;
font-style: normal;
font-size: 14px;
color: #050A0D;
text-decoration: none;
display: block;
padding: 17px 16px 14px 16px;
margin: 0;
margin-bottom: 0px;
}
#menu-bar li ul li a {
margin: 0;
}
#menu-bar .active a, #menu-bar li:hover > a {
background: #FFF;
color: #050A0D;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
}
#menu-bar ul a:hover {
background: #FFF !important;
color: #ED7E20 !important;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul {
background: #FFF;
display: none;
margin: 0;
padding: 0;
width: 300px;
position: absolute;
top: 45px;
left: 0;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding: 10px 0px 10px 15px;
color: #050A0D !important;
font-size:14px;
font-style:normal;
font-family:arial;
font-weight: normal;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
} |
||
| Tomáš123 Profil |
#2 · Zasláno: 4. 4. 2015, 09:44:03
Elxan:
Pridaj prosím HTML a CSS kód do tunajšieho editora Živá ukázka. Tu je článok, ktorý zachytáva princíp tvorby vysúvacieho menu. Môžeš si ho prečítať, aby si lepšie pochopil o čo tam ide. |
||
| Elxan Profil * |
#3 · Zasláno: 4. 4. 2015, 10:23:55
Děkuji za článek o té tvorbě menu. Budu muset nastudovat a vyzkoušet udělat něco od základů sám.
Zde je odkaz na to menu: http://kod.djpw.cz/abmb ...ta další podkazetorie se mě zobrazuje až dole. místo aby se načetla hned vedle té polložky v pravo. Zatím jsem zkoušel co se dalo, ale nešlo mě to. To menu jsem někde vygenerval protože sám to neumím, ale ten generátor už asi nějak nepočítá s více větvením se :-( |
||
| Tomáš123 Profil |
#4 · Zasláno: 4. 4. 2015, 11:38:56
Elxan:
Pridal som deklarácie na riadkoch 66 - 69. Tu je odkaz. |
||
| Elxan Profil * |
#5 · Zasláno: 4. 4. 2015, 12:22:49
Tomáši moc děkuji. Tohto mě ušetřilo hodně nervů ...jsem nevěděl kudy. Hodne mě pomohl i ten odkaz, který objasnil hromadu věcí.
|
||
|
Časová prodleva: 9 let
|
|||
0