| Autor | Zpráva | ||
|---|---|---|---|
| simmi Profil |
#1 · Zasláno: 9. 7. 2012, 16:14:19
potřebuji poradit co znamená to větší někde sem již viděl i menší
co to znamená a co to dělá? #cssmenu > ul li:hover>a |
||
| panther Profil |
#2 · Zasláno: 9. 7. 2012, 16:16:40
simmi:
„někde sem již viděl i menší“ myslis „neco < neco“? to v CSS jiste nebylo. Jinak to, co uvadis, je selektor „primeho potomka“, pripadne „child selector“, dohledej si o nem vice. |
||
| juriad Profil |
#3 · Zasláno: 9. 7. 2012, 16:18:34
http://www.w3.org/TR/css3-selectors/#selectors
ne všechny jsou všude podporované (spíše naopak) |
||
| Jendak Profil * |
#4 · Zasláno: 9. 7. 2012, 16:26:09
zkráceně: v tomto případě
#cssmenu > ul li:hover>a {css kod, který (ne)ovlivní HTML prvky... <div id="ccsmenu"> <ul> <li> <a href="">Tento odkaz se ovlivní</a> </li> <li> <div><a href="">Tohle se neovlivní! Je to proto, že odkaz musí přímo následovat po LI. Kdyby bylo v CSS mezi li:hover a odkazem-"a" jen mezera, ovlivnilo by se i tohle.</a></div> </li> <a href="">Tento se samozřejmě neovlivní</a> </ul> |
||
| simmi Profil |
#5 · Zasláno: 9. 7. 2012, 16:55:58
Ok mám to takhle a pořád se mi do sub menu vklada na pozadi obrazek menu01.png potřebuju se toho zbavit nejaky nápad?
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>Společnost</span></a>
<ul>
<li><a href='#'><span>O nás</span></a></li>
<li><a href='#'><span>Naše nabídka</span></a></li>
<li><a href='#'><span>Proč s námi?</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='#'><span>Akce</span></a>
<ul>
<li><div><a href='#'><span>Společenské</span></a></div></li>
<li><div><a href='#'><span>Semináře, konference</span></a></div></li>
<li><div><a href='#'><span>Pravá moravská zabíjačka</span></a></div></li>
</ul>
</li>
<li><a href='#'><span>PR aktivity</span></a></li>
<li><a href='#'><span>Kontakty</span></a></li>
</ul>
</div>/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}
/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
width: 150px;
height: 45px;
/* Typography */
font-family: trebuchet ms, Helvetica, Arial, sans-serif;
color: #000000;
text-decoration: none;
font-size: 13px;
font-weight: 300;
/* Background & effects */
background: transparent url(images/menu01.png) no-repeat;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
color: #000000;
background: transparent url(images/menu02.png) no-repeat;
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub>a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub>a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
border-left: 4px solid #444444;
}
#cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
border-left: 4px solid #fff;
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: -205px;
top: -9999px;
width: 200px;
padding-left: 5px;
background: transparent url(images/submenu01.png) no-repeat;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover>ul {
top: 0px;
opacity: 1;
} |
||
| panther Profil |
#6 · Zasláno: 9. 7. 2012, 17:12:06
simmi:
„nejaky nápad?“ odkaz na problematickou stranku misto 150 radek kodu. od konstrukce ::before si slibujes co?
|
||
| simmi Profil |
panther, panther:
nevím mělo by tam něco být? teto kód mi vyplivnul nějaký generator a potrebuju to napasovat na design.. zkratka aby se v sub menu nezobrazovalo menu01.png panther: tady ten link http://vm-promotion.cz/test/ |
||
| panther Profil |
simmi:
„zkratka aby se v sub menu nezobrazovalo menu01.png“ Moznosti je vice, jedna z nich je treba tato: #cssmenu > ul li li a {background: none;}„nevím mělo by tam něco být?“ nic, jen to je blbost, bude prohlizecem ignorovana. |
||
| simmi Profil |
#9 · Zasláno: 9. 7. 2012, 17:56:40
panther:
a me to nefungovalo jinak diky |
||
|
Časová prodleva: 12 let
|
|||
0