Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Drop down menu CSS

[es] :: Web dizajn i CSS :: Drop down menu CSS

[ Pregleda: 11985 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Kety

Član broj: 49094
Poruke: 51
212.200.132.*



+8 Profil

icon Drop down menu CSS01.06.2017. u 10:00 - pre 24 meseci
Zamolila bi ako neko može da mi pomogne oko meni-ja.
Problem je u tome što se padajući deo menija ne izvuče koliko je potrebno da bi se videli svi linkovi.

Koristim meni:

html:
Code:
<div id="iefix"> 
        <ul id="nav">
            <li><a href="#">NAZIV 1</a></li>
            <li><a href="#">NAZIV 2</a>
                <div>
                    <ul>
                        <li><a href="#">LINK 1</a></li>
                        <li><a href="#">LINK 2</a></li>
                        <li><a href="#">LINK 3</a></li>
                        <li><a href="#">LINK 4</a></li>
                        <li><a href="#">LINK 5</a></li>
                        <li><a href="#">LINK 6</a></li>
                        <li><a href="#">LINK 7</a></li>
                        <li><a href="#">LINK 8</a></li>                       
                    </ul>
                </div>
            </li>
            <li><a href="#">NAZIV 3</a></li>
         </ul>
    </div>


CSS:
Code:
#iefix {
    position: absolute;
    z-index:1000;
    top: 124px;
}
#nav,#nav ul {
    font-family:verdana;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    
}
#nav {
    height:25px;
    left:0;
    overflow:hidden;
    top:0;
}
#nav li {
    float:left;
    position:relative;
    z-index:2;
}
#nav li a {
    color:#280801;
    display:block;
    float:left;
    font-size:13px;
    align: bottom;
    height:28px; 
    line-height:29px; 
    padding:0 10px;
    position:relative;
    text-decoration: none;
    z-index:2;
}
#nav li:first-child a {
    padding-left:25px;
}
#nav li ul li:first-child a {
    background-image:none;
    padding-left:10px;
}
#nav li.pad {
    display:block;
    height:53px;
    width:35px;
}
#nav ul {
    background:#fff4d8;
    height:auto;
    padding:5px 5px;
    position: absolute;
    top:-215px;
    width:280px;
    z-index:10;

    border-radius:8px; /*some css3*/
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    transition:0.8s ease-in-out;
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:2px 2px 3px rgba(0, 0, 0, 0.5);
    -moz-transition:0.8s ease-in-out;
    -o-transition:0.8s ease-in-out;
    -webkit-transition:all 0.8s ease-in-out;
}
#nav ul li {
    width:180px;
    
}
#nav ul li a {
    height:25px;
    line-height:20px;
    width:250px;
    text-align: left;
}
#nav:hover {
    height:400px; 
    
}
#nav li:hover ul {
    -moz-transform:translate(0,161px); /*some css3*/
    -o-transform:translate(0,161px);
    -webkit-transform:translate(0,161px);
}
#nav a:hover,#nav li:hover > a {
    color:#b71904;
    background:#FADDB1;
    text-align: left;
}


Nadam se da ima neko rešenje.




 
Odgovor na temu

S A J A
Beograd

Član broj: 226539
Poruke: 1798
*.static.sbb.rs.



+407 Profil

icon Re: Drop down menu CSS02.06.2017. u 21:48 - pre 23 meseci
Nemam vremena niti strpljenja da bistrim po tom kodu ali imaš više gotovih rešenja na tu temu. Samo uzmeš koje ti odgovara i prepraviš.

https://www.google.rs/search?q...&ei=os4xWf-3DKGn6ASux6moBg


 
Odgovor na temu

mjanjic
Mladen Janjić
Šikagou

Član broj: 187539
Poruke: 1165



+358 Profil

icon Re: Drop down menu CSS03.06.2017. u 00:56 - pre 23 meseci
Za "#nav ul" imaš CSS deklaraciju "top:-215px;"

Zato u onim tranzicijama za "#nav li:hover ul" treba da staviš 215px, ali to nije najbolji način.
Generalno, nije dobar način da se uradi animacija, može sa jQuery mnogo lakše, imaš slideDown metodu ili čak slideToggle koju staviš unutar .hover() metode.

Međutim, u tom slučaju moraš staviti ugneždenu listu da bude "position:absolute" kako ne bi remetila sadržaj ispod menija (kod tebe nije dobro što na :hover stavljaš visinu glavnog menija 400px, to možda ima smisla kod prikaza na mobilnim uređajima, ali se i tada ne postavlja visina glavnog menija, već LI elemenata.


Za koju god metodu da se odlučiš, preporučujem LESS ili SASS (ako već ne znaš LESS, onda se preporučuje da počneš SASS), jer možeš zadavati promenljive i konstante koje kasnije koristiš u CSS-u, a takođe možeš praviti ugneždene stilove (što kod CSS-a nije dozvoljeno, ali kompajler u letu generiše korektan CSS, međutim tebi je u LESS-u ili SASS-u lakše da ne razmišljaš o složenim selektorima, već uradiš ugnežden kod). Takođe, najvažnija stvar je da definišeš npr. neku promenljivu za boju ili dimenziju (recimo ovih 215px) i to koristiš kasnije, ako ti treba da promeniš, samo promeniš u definiciji promenljive umesto da menjaš u celom CSS fajlu.



Evo kako bi to izgledalo u SASS-u (imaš i DEMO pa možeš da proveriš uživo): http://red-team-design.com/ani...own-navigation-made-with-sass/
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

svepomalo

Član broj: 306404
Poruke: 166



+21 Profil

icon Re: Drop down menu CSS03.06.2017. u 01:05 - pre 23 meseci
Citat:
mjanjic: Za "#nav ul" imaš CSS deklaraciju "top:-215px;"

Za koju god metodu da se odlučiš, preporučujem LESS ili SASS (ako već ne znaš LESS, onda se preporučuje da počneš SASS)...


a zasto se preporucuje prvo SASS pa LESS, jel LESS nesto mnogo bolji od SASS-a ili?
 
Odgovor na temu

Kety

Član broj: 49094
Poruke: 51
*.dynamic.sbb.rs.



+8 Profil

icon Re: Drop down menu CSS03.06.2017. u 11:26 - pre 23 meseci
Hvala svima na odgovorima i savetima.
Pomogli ste mi da dođem do rešenja.
 
Odgovor na temu

mjanjic
Mladen Janjić
Šikagou

Član broj: 187539
Poruke: 1165



+358 Profil

icon Re: Drop down menu CSS03.06.2017. u 19:30 - pre 23 meseci
Nemam pojma, ja sam počeo sa LESS, i generalno je preporuka da kad već znaš jedno, nastaviš to da usavršavaš, ali na više mesta sam pročitao preporuke da ko počinje od nule, bolje da počne SASS, ali je sve stvar činih preferenci.

LESS ima bolje sređenu dokumentaciju, dok SASS ima nešto više mogućnosti po pitanju petlji i uslovnih izvršavanja koda, ali su i jedan i drugi CSS predprocesori i svako ko se ozbiljnije bavi Web dizajnom bi morao da zna bar jedan do njih.
Čak je i Bootstrap kod verzije 3 uveo mogućnost korišćenja SASS-a (podrazumevano se koristio LESS) da bi kod verzije četiri u potpunosti prešli na SASS.

U principu, ko nauči jedan od ova dva, neće mu biti veliki problem da usvoji i drugi, jer je logika u većini stvari tu negde, samo se razlikuje sintaksa.
Blessed are those who can laugh at themselves, for they shall never cease to be amused.
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Drop down menu CSS

[ Pregleda: 11985 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.