Heippa,
Olen täysin käsi koodarina, joten kysäisen fiksummilta apua. Minulla on css, jolla saa toimivan drop down menun, joka näyttää jotakuinkin tältä http://www.alistapart.com/d/horizdropdowns/horizontal.htm
Haluaisin kuitenkin navigaation, jossa pääotsikot olisivat vierekkäin ja alaotsikot aukeaisivat pääotsikon alle. Mitä tässä koodissa pitäisi muuttaa, jotta saisin sen toimimaan niin.
Tiedän, että netti on varmasti pullollaan ohjeita, ja olen jo aika monta niistä kokeillut. Tämä on löytämistäni ainoa joka toimii nätisti useammassa selaimessa ja on muutenkin inhimillisen näköinen. Sen takia kysäisen asiaa täältä, josko muokkaamalla tätä voisi onnistua.
Ja tässä vielä se css:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
Kiitos!!!
Olen täysin käsi koodarina, joten kysäisen fiksummilta apua. Minulla on css, jolla saa toimivan drop down menun, joka näyttää jotakuinkin tältä http://www.alistapart.com/d/horizdropdowns/horizontal.htm
Haluaisin kuitenkin navigaation, jossa pääotsikot olisivat vierekkäin ja alaotsikot aukeaisivat pääotsikon alle. Mitä tässä koodissa pitäisi muuttaa, jotta saisin sen toimimaan niin.
Tiedän, että netti on varmasti pullollaan ohjeita, ja olen jo aika monta niistä kokeillut. Tämä on löytämistäni ainoa joka toimii nätisti useammassa selaimessa ja on muutenkin inhimillisen näköinen. Sen takia kysäisen asiaa täältä, josko muokkaamalla tätä voisi onnistua.
Ja tässä vielä se css:
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul { display: block; }
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
Kiitos!!!
Vastaukset 4
Vanhimmat
http://www.dynamicdrive.com/style/csslibrary/category/C1/
(CSS Library -> Horizontal CSS Menus)
koodeinen & ohjeineen
joo, yhden päivän tässä googletellut, ja tuo yllämainitsemäni on ainoa, jonka olen saanut täysin toimimaan. Jos joku tosiaan osaa fiksata sen, niin olisin tuhannesti kiitollinen. Tai sitten sivuilleni tulee navigaatio reunaan =)
tai ehkä alan kutomaan sukkia, se saattaisi sopia mulle paremmin...
http://www.cssplay.co.uk/menus/
lisää... ihan hyvät sivut...
:)
Päivän askartelun päätteeksi otin menun täältä:
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm
Hyödyntää myös javascriptiä, mutta sivuilta saa js:n valmiina tiedostona, joten siitä ei tarvitse ymmärtää mitään, kunhan osaa tallentaa sen samaan kansioon muiden kanssa=). Ulkonäkö on suoraan kuin 90-luvulta, mutta sitähän pystyy helposti muokkaamaan.
Ilmeisesti joissain ie:n versioissa on ongelmia, jotka estävät CSS:llä tehtyjen drop down -menujen toimimisen. Kokeilin päivän aikana aika montaa mallia, jotka olivat toteutettu pelkällä CSS:llä. Niistä, jotka sain toimimaan, ei yksikään toiminut moitteettomasti ie:llä. Firefoxilla suurin osa menuista toimi.
Kiitoksia avustaneille!