[es] - Padajući meni i ostanak promenjene boje

blackb

Član broj: 114718
Poruke: 40
*.static.isp.telekom.rs.

Profil

Padajući meni i ostanak promenjene boje

^{13.12.2010. u 14:01 - pre 162 meseci}

Nov sam u html-u i CSS-u i odmah da kažem da ovaj problem pokušavam da rešim samo pomoću njih (još nisam "zagrizao" JS) a problem je sledeći: napravio sam vertikalni meni koji ima i drugi nivo. Prilikom prelaska mišem preko elemenata/ćelija prvog nivoa menja im se boja i otvaraju se podmeniji (hover). Koristio sam samo ul, li i div tagove - nikakve tabele.

Ono što želim je da prilikom prelaska mišem na bilo koji element drugog nivoa ostane promenjena boja i ćelije (parenta) prvog nivoa (s obzirom da se ona vraća na prvobitnu boju kada je pointer miša napusti) i da tako ostane sve dok je pointer na bilo kom elementu tog podmenija. Da li je to izvodljivo samo putem HTML i CSS-a?

Evo CSS-a tog vertikalnog menija:

Code:

#menivert ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    }

#menivert ul li {
    position: relative;
    left: -1px;
    color: #000000;
    top: 0px;
    list-style-position: inside;
    }

    #menivert li ul {
    position: absolute;
    left: 151px;
    display: none;
    top: -1px;
    z-index: 20;
    }

    #menivert ul li a {
    display: block;
    color: #000000;
    padding: 5px;
    }

    #menivert li:hover ul {
    display: block;
    }

    #menivert A:hover {
    background-color:#D1D7DE;
    font-weight: bold;
}

    #menivertkid A:hover {
    background-color:#D3C0CE;
    font-weight: bold;
}

i deo HTML-a :

Code (html):

 <div id="menivert";>

     <ul> 

     <li><a href="#" class="style6">neki tekst</a></li>   //ćelija menija/

     <li><a href="#" class="style6">neki tekst</a>         //[b]ćelija menija - ova da ne menja boju kada je pointer

                                                                             na bilo kojoj ćeliji podmenija![/b]/

               <div id="menivertkid";>

                   <ul> 

               <li><a href="#" class="style7">neki tekst</a></li>    /ćelija podmenija/

                    <li><a href="#" class="style7">neki tekst</a></li>    /ćelija podmenija/

                       <li><a href="#" class="style7">neki tekst</a></li>    /ćelija podmenija/

                     </ul>

             </div>

     </li> 

     </div>

Pretpostavljam da sam previše zakomplikovao ali ponavljam - početnik sam.

Da iskoristim temu za još jedno pitanje - rešio sam sve probleme centriranja, prikaza u različitim rezolucijama (zahvaljujući ovom forumu) ali jedini problem koji mi pravi IE 8.0 je da prilikom otvaranja strane u vrhu izbacuje poruku:
"To help protect your security, IE has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..."
Dovoljno je ugasiti tu poruku i sve radi normalno ali me nervira i kako se taj problem otklanja?

_{moderator: dodati [code][/code] tagovi}

_{[Ovu poruku je menjao Aleksandar Ružičić dana 13.12.2010. u 17:44 GMT+1]}

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-1.sezampro.yu.

+33 Profil

Re: Padajući meni i ostanak promenjene boje

^{13.12.2010. u 14:53 - pre 162 meseci}

Probaj možda ovako nešto:

Code:
#menivert li:hover a:first-child {
background-color:#D1D7DE;
font-weight: bold;
}

Pritom, da bi ta :first-child notacija radila u IE-u, moraš da definišeš DOCTYPE u tvom HTML dokumentu.

Odgovor na temu

pajaja
Beograd

Administrator
Član broj: 41598
Poruke: 3430
217.24.24.*

Jabber: pajaja@elitesecurity.org
ICQ: 253317269

+144 Profil

Re: Padajući meni i ostanak promenjene boje

^{13.12.2010. u 15:57 - pre 162 meseci}

Pozdrav,

da bi to sto zelis radilo kako treba i svuda jos uvek je najjednostavnije da koristis javascript. Postoji dosta js skripti koje rade to sto zelis, potrazi ih na guglu.
Iako bi ovo sto je Nikola predlozio trebalo da radi, li:hover, kao ni a:first-child ne rade kako treba u odredjenim starijim browserima.

_{xxx

mali mali mali kamičak...nebo plave boje.

In Memoriam: Madzone Zeka(15.09.2005-16.09.2005)}

Odgovor na temu

Nikola Poša
Backend (PHP) developer
Beograd

Član broj: 173839
Poruke: 1616
*.adsl-1.sezampro.yu.

+33 Profil

Re: Padajući meni i ostanak promenjene boje

^{13.12.2010. u 17:48 - pre 162 meseci}

Citat:

pajaja: li:hover, kao ni a:first-child ne rade kako treba u odredjenim starijim browserima.

Da, sad sam baš isprobao, ne radi kako treba...

JS-om možeš mnogo preciznije da saopštiš koje modifikacije želiš prilikom prelaska miša preko stavki u meniju. Evo sklepao sam na brzinu jQuery rešenje za to što ti hoćeš pa probaj:

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#menivert ul li').mouseenter(function() {
      $(this).children('a:first-child').addClass('active');
      $(this).find('ul:first').show();
    }).mouseleave(function() {
      $(this).children('a:first-child').removeClass('active');
      $(this).find('ul:first').hide();
    });
});
</script>

Sve to iznad ubaci u head sekciju i modifikuj CSS na način da umesto ovog dela:

Code:
#menivert li:hover ul {
    display: block;
    }

    #menivert A:hover {
    background-color:#D1D7DE;
    font-weight: bold;
}

    #menivertkid A:hover {
    background-color:#D3C0CE;
    font-weight: bold;
}

... imaš samo ovo:

Code:
#menivert li a.active {
    background-color:#D1D7DE;
    font-weight: bold;
}

    #menivertkid li a.active {
    background-color:#D3C0CE;
    font-weight: bold;
}

Odgovor na temu

blackb

Član broj: 114718
Poruke: 40
178.22.216.*

Profil

Re: Padajući meni i ostanak promenjene boje

^{13.12.2010. u 22:04 - pre 162 meseci}

Nikola hvala, ovo tvoje čudo radi baš ono što sam zamislio. Samo imam još par pitanja:

Jedino mi ostaje problem IE jer izbacije i dalje onu poruku - "To help protect your security, IE has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..." stim što sada nije dovoljno samo da je ugasim već moram da pritisnem opciju "Allow blocked content..." da bi mi radio uopšte taj vertikalni meni.
MEĐUTIM, googlanjem sam pronašao neke odgovore da je to slučaj kod IE 8.0 samo kada otvaram (isprobavam) stranicu sa localhosta tj mog kompa a da kada sajt budem podigao na server, ta poruka u IE više neće iskakati. Jesu li u pravu?

Takođe nisam ubacivao csshover.htc (nisam pretragom baš do kraja ni razumeo kako) jer vidim da IE (bar ovaj 8.0) nema problema sa podmenijima.

Definitivno počinjem sa radom na JS samo mi preporučite neku knjigu/tutorijal za početnike sa elementarnim znanjem HTML-a i CSS-a - još ako imate neki link...

Odgovor na temu