Tässä on tekemäni navigation bar. Haluaisin Vinkkejä kuinka saada tästä parempi/hienompi.
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="#">Koti</a>
</li>
<li> <a href="#">Anna palautetta</a>
</li>
<li> <a href="#">Minut löydät myös</a>
<ul>
<li><a href="#">Ohjelmointiputkasta</a>
<li><a href="#">Twitteristä</a>
</li>
</ul>
</li>
<li> <a href="#">Tietoa</a>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
</div>
<!-- Nav end -->ja sitten CSS
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#nav {
background-color: #222;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}Esikatselu: http://markka.96.lt/navbar.html
Ihan jatkoa ajatellen: laita tuollaiset koodit JSiddleen tms. On turhauttavaa pistää itse oma palvelin päälle nähdäkseni mitä tuo koodi tuottaa.
Itse navipalkki on ihan hieno. Itse kyllä lisäisin dropdownille luokan ja poistaisin siitä borderit.
Kuitenkin tuollaisen palkin tekeminen itse on turhaa. Kannattaa opetella käyttämään valmiita front-end-frameworkkeja (ihana yhdyssana) kuten Foundation tai Twitter Bootstrap.
Linkki muille JSFiddleen: http://jsfiddle.net/o3u07toz/
Edit: linkki rikki
spegi kirjoitti:
On turhauttavaa pistää itse oma palvelin päälle nähdäkseni mitä tuo koodi tuottaa.
Juu, hostaan vaikka aamulla tuon ja pistän linkin tänne
Mielestäni ainakin tuosta absoluuttisesta leveydestä (960px) kannattaisi hankkiutua eroon.
Haiskahtaa hieman siltä, että leveys on ajattelemattomuutta laitettu navigaation määritteisiin eikä kokonaan navigaation ulkopuolelle.
spegi kirjoitti:
Ihan jatkoa ajatellen: laita tuollaiset koodit JSiddleen tms. On turhauttavaa pistää itse oma palvelin päälle nähdäkseni mitä tuo koodi tuottaa.
Html:n esikatseluun ei tarvitse palvelinta vaan selaimen.
The Alchemist kirjoitti:
Html:n esikatseluun ei tarvitse palvelinta vaan selaimen.
No se on kyllä totta :D Hostaan tän kuitenkin
Nyt on hostattu esikatselua varten :) http://markka.96.lt/navbar.html
Riviltä 12 taitaa puuttua </li>.
Näyttäisi siistimmältä, jos alastulevan valikon leveys olisi saman verran kuin sen avaavan alueen.
Hansen kirjoitti:
Riviltä 12 taitaa puuttua </li>.
Se on tarkotuksella noin, koska noi ohjelmointiputkasta ja Twitteristä on "Lista" niin en lopeta sitä siinä kohassa koska se "Lista" ei toimi muuten.
Muotoilisin HTML-koodin selvemmin ja poistaisin #nav_wrapper-elementin:
<nav id="nav"> <ul> <li><a href="#">Koti</a></li> <li><a href="#">Anna palautetta</a></li> <li> <a href="#">Minut löydät myös</a> <ul> <li><a href="#">Ohjelmointiputkasta</a></li> <li><a href="#">Twitteristä</a></li> </ul> </li> <li><a href="#">Tietoa</a></li> </ul> </nav>
CSS:stä tuli ainakin tällainen:
body {
font: 17px Arial, sans-serif;
margin: 0;
}
#nav {
background: #222;
}
#nav > ul {
max-width: 960px;
margin: 0 auto;
}
#nav ul {
list-style: none;
padding: 0;
}
#nav li {
display: inline-block;
}
#nav li:hover {
background: #333;
}
#nav a {
color: #ccc;
text-decoration: none;
padding: 15px;
display: block;
}
#nav ul ul {
background: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
position: absolute;
}
#nav li:not(:hover) ul {
display: none;
}
#nav ul ul li {
display: block;
}
#nav ul ul a:hover {
color: #699;
}Testaa: http://codepen.io/anon/pen/ZQEZBJ
Lisäys:
Markka kirjoitti:
(06.12.2015 16:07:32): ”– –” Se on tarkotuksella noin, koska noi...
Ei sulkutägin </li> lisääminen 12. riville vaikuta mitenkään valikon toimivuuteen.
Lisäys:
Tekstin ”Minut löydät myös” ympäriltä voisi poistaa a-tägit, jos kyseisen tekstin ei ole tarkoitus olla linkki.
Tällöin CSS:ään kannattaa tehdä seuraavat muutokset:
#nav li määritykset color: #ccc; ja padding: 15px;#nav a määritys color: #ccc; määrityksellä color: inherit; ja poistetaan padding-määritys.Markka kirjoitti:
(06.12.2015 16:07:32): ”– –” Se on tarkotuksella noin, koska noi ohjelmointiputkasta ja Twitteristä on "Lista" niin en lopeta sitä
Li ei tarkoita listaa vaan listan jäsentä (list item). Tuo ul on lista (unordered list)
Aihe on jo aika vanha, joten et voi enää vastata siihen.