<ul> <li> hover
 
mistique29. okt 2009 22:50:48Pridružen od:
1. okt 2008
306 objav
+208-203
#1Hello,

Delam css meni in me zanima kako spisati css, da se ob kliku na element osnovnega menija odpre "sub" meni in se ne skrije, ko kazalec miške umaknem z elementa osnovnega menija? Rad bi tudi, da je submeni viden tudi v primeru, ko klikam med elementi submenija...skratka, da se zapre šele, ko kliknem na naslednji element osnovnega menija.
Hover namreč prikaže submeni tisti čas, ko je miška na elementu osnovnega menija, ko pa se premaknem proti elementu submenija, se submeni spet skrije (med osnovnim menijem in submenijem je precejšenj razmak). Meni delam s pomočjo list <ul>.
všeč(0)ni všeč(0)spam(0)
Give a man a fish, and he'll eat for a day. Teach him how to fish and he'll eat forever
 
Antony30. okt 2009 08:05:39Pridružen od:
18. maj 2008
140 objav
+108-24
#2odgovor: javascript. Več na ZS.
všeč(0)ni všeč(0)spam(0)
 
mistique30. okt 2009 18:07:38Pridružen od:
1. okt 2008
306 objav
+208-203
#3Verjamem, da se z js to lahko naredi. Če ne bo šlo durgače, bom prisiljen uporabiti js.
Sem pa našel primer css menija (pure css), ki se obnaša tako kot sem opisal sam.

http://www.cssplay.co.uk/menus/new-dropdown.html

Ne vem kakšen trik je uporabil tip, da je dosegel, da se meni tako obnaša...
Glavna razlika med zgornjim primerom in mojim menijem je, da je moj meni drop-down horizontal in ne vertical.
všeč(0)ni všeč(0)spam(0)
Give a man a fish, and he'll eat for a day. Teach him how to fish and he'll eat forever
 
Vini30. okt 2009 18:28:52Pridružen od:
1. sep 2006
5976 objav
+3116-30335
#4Uporabil je :focus in :active pseudo-class.
všeč(0)ni všeč(0)spam(0)
 
Antony1. nov 2009 20:26:10Pridružen od:
18. maj 2008
140 objav
+108-24
#5mistique, malce narobe sem razumel. Sem mislil, da mora biti submeni odprt še nekaj sekund po tem, ko greš z miško izven tega polja.

Če pa želiš čisto klasičen CSS submeni pa lahko narediš ajnfoh s klasičnem :hover css ukazom. Le da je težava v tem, da v IE6 in 7 :hover element dela samo na <a> elementu, na ostalih pa ne (recimo <li>).

Najprej si s CSS naredi strukturo tako da bodo vsi elementi vidni, nato pa dodaj:
.osnovniMeni li ul li { left: -9999em)
.osnovniMeni li:hover ul li { left: auto)

To je to.
všeč(+3)ni všeč(0)spam(0)
 
bostjan-24. feb 2010 23:31:36Pridružen od:
6. nov 2009
225 objav
+101-63
#6Pozdrav!
mam problem z drop down menujem pri bloggerju. url: http://testic123.blogspot.com/search/label/aaa
in sicer ko se ti drop down menuji odprejo grejo za javascript; za reklamo ter za besedilo "Prikaz objav z oznako aaa. " zdej za samo reklamo me ne skrbi, jo že premaknem kam drugam, kamor ne bo moteča ampak tisto besedilo me pa res moti. sm iskal kakšen odgovor po netu, sam nism nič pametnega našel, velik ljudi ma tak problem.... a kdo ve kakšno rešitev? bi res lepo prosu.

tukaj je še koda menija:

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}


že vnaprej hvala!
všeč(0)ni všeč(0)spam(0)
 
schtr4jh24. feb 2010 23:45:58Pridružen od:
24. nov 2008
305 objav
+225-224
#7Poskusi zamenjat ozadje z netransparentnim.
všeč(0)ni všeč(0)spam(0)
 
bostjan-24. feb 2010 23:53:57Pridružen od:
6. nov 2009
225 objav
+101-63
#8mi je po enih 100 prebrskanih straneh le uspelo dobit rešitev, za "display: inline;" sm dodal "z-index:100;", tako da rata "display: inline; z-index:100;" in zadeva deluje v vseh taglavnih brskalnikih, kot sm želel.

hvala useen, LP
všeč(0)ni všeč(0)spam(0)
 
stran 1 od 1 |<<1>>|