Drop down-meny m.h.a listor

[17843]

Hej!

 

Se foljande exempel http://www.htmldog.com/articles/suckerfish/example/

 

<style type="text/css">

body {
font-family: arial, helvetica, serif;
font-size: 80%;
background: white url(images/ddbg3.gif) no-repeat 6000px 6000px;
padding: 2em;
margin: 0;
}

#content {
width: 34em;
background-color: #f4ecd9;
padding: 1em 0;
border: 6px double #7d6340;
margin: auto;
voice-family: "\"}\""; 
voice-family:inherit;
width: 32em;
}
html>body #content {
width: 32em;
} 

a {
text-decoration: none;
}

a:link {
color: #080;
}

a:visited {
color: #790;
}

a:active {
color: red;
}

a:hover {
text-decoration: underline;
}

h1 {
text-align: center;
padding: 0 0 0.25em 0;
margin: 0;
}

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

#nav a {
font-weight: bold;
color: green;
}

#nav a {
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}

#nav li li a:hover {
padding: 0.2em 5px;
border: 5px solid #7d6340;
border-width: 0 5px;
}

li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #7d6340;
border-width: 1px 0;
}

li#first {
border-left-width: 1em;
}

li#last {
border-right-width: 1em;
}

li ul {
display: none;
position: absolute;
top: 100%;
left: 0;

font-weight: normal;
background: url(images/ddbg3.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

li:hover ul, li.over ul {
display: block;
}

hr {
display: none;
}

p {
clear: left;
background: url(images/remora.gif) center left no-repeat;
padding: 1em 1em 0 1em;
margin: 0;
}

p.image {
float: right;
font-size: 0.8em;
text-align: center;
color: #7d6340;
padding: 1.25em 1.25em 0.25em 0.25em;
}

p.image img {
display: block;
border: 1px solid #7d6340;
}

</style>

 

Exakt vad ar det har som gor att hela raden fungerar som en lank istallet for enbart texten som man skulle kunna tro:

 

<li id="first">
	<div><a href="">Overview</a></div>
	<ul>

		<li><img src="images/remora4.gif" width="100" height="27" alt="Remora" /></li>
		<li><a href="">Classification</a></li>
		<li><a href="">Physcial Characteristics</a></li>
		<li><a href="">Habitat</a></li>
		<li><a href="">Lifestyle</a></li>
		<li><a href="">Evolution</a></li>

		<li><a href="">Distribution</a></li>
	</ul>
</li>

 

[Anjuna Moon]

xakt vad ar det har som gor att hela raden fungerar som en lank istallet for enbart texten som man skulle kunna tro:

 

Vilken "rad"

 

[17843]

Om du tittar i exemplet tror jag du forstar. Inte bara texten lankar vidare utan hela raden den star skriven pa.

 

[Anjuna Moon]

UL/LI-menyer är bara av ondo, för de stöds ändå inte av alla webbläsare. Leta efter rena javascriptmenyer och då skrivna för aktuella läsare. UL/LI-varianterna kommer bara ge huvudvärk just pga att de bygger på en standard som inte är så bra implementerad någonstans.

 

[flora50]

Det är listtaggen <li> som ger klickbarhet på hela raden. Ta bort <li> och </li> runt en länk så får du se.

 

[flora50]

UL/LI-menyer är bara av ondo, för de stöds ändå inte av alla webbläsare.

Vilka webbläsare stöder inte UL/LI?

 

[17843]

Nope. Nar jag apar efter ar endast texten lankad. SOm i det har exemplet http://www.htmldog.com/articles/suckerfish/bones/

 

[17843]

Sa du har ingen aning med andra ord?

 

[flora50]

Nej, har du?

 

[Anjuna Moon]

Vilka webbläsare stöder inte UL/LI?

Alla stödjer UL/LI, det var inte det jag pratade om. Jag pratar om UL/LI-menyer, dvs de du i Mozilla, och andra läsare som stödjer denna CSS, kan skapa dropdownmenyer via stilar istället för javascript. IE stödjer inte detta, men har du annan info så får du gärna bevisa detta =)

 

[inlägget ändrat 2007-11-16 09:27:50 av Anjuna Moon]

[17843]

Det var inte riktat till dig, jag sag inte direkt Anjuna Moons senaste inlagg som sarskilt konstruktivt.

 

[Anjuna Moon]

Det var inte riktat till dig, jag sag inte direkt Anjuna Moons senaste inlagg som sarskilt konstruktivt.

Det är tidigt på morgonen och du får ha tålamod

 

Dessutom var det visst konstruktivt eftersom jag påför att UL/LI-menyer inte är något att lita på. Men vill du inte lyssna är det ditt problem

[inlägget ändrat 2007-11-16 09:26:20 av Anjuna Moon]

[Micke_skane]

Tyvärr är det så, ännu i alla fall, att IE inte stödjer all CSS som ingår i W3C-standarden.

För att få dem här menyerna att fungera "fullt ut" krävs det en del css-hack och kanske i längden även lite javascript.

Gör det det är ju hela "css-idén" borta.

 

Man kan ju hoppas att IE14 kommer att stödja CSS fullt ut, som FF redan

Kan ju nämna att i XHtml2 kommer det att finnas nl(navigeringslister) och det kan man ju hoppas att IE kommer att stödja.

Tänk Såå mycket lättare det hade varit om alla hade kunnat släppa lite på sin "stolthet/envishet"...

[inlägget ändrat 2007-11-16 09:42:01 av Micke_skane]

[flora50]

I det förra exemplet är LI formaterad med

 

#nav li li a {

display: block;

.

.

.

}

 

Detta är detta som gör att hela raden blir klickbar

 

[Anjuna Moon]

Gör det det är ju hela "css-idén" borta.

Om jag skall vara helt ärlig så har jag aldrig gillat vare sig MS sätt att kunna använda script i CSS eller standardens sätt att skapa just dessa typer av effekter. För mig skall stilmallar beskriva utseende och inte beteende så jag tycker faktiskt W3C ska banta lite i sin entusiasm. Det finns en alltför stor fara annars att man tappar just den separation av design, funktionalitet och innehåll som man så helhjärtat försökt arbeta för.

 

[flora50]

har du annan info

Inte alls, bara nyfiken

 

[Micke_skane]

För mig skall stilmallar beskriva utseende och inte beteende

Så är min tanke med.

Ska det vara så himla svårt att få till tekniker som ALLA stödjer, eller rätta sagt så finns det väl det men intresset finns inte där...

Varför jobbar man inte som rymdforskare, mycket lättare

 

[Anjuna Moon]

Ska det vara så himla svårt att få till tekniker som ALLA stödjer,

Tja, USA vet ju fortfarande inte hur lång en meter är så ... =)

 

[Micke_skane]

Tja, USA vet ju fortfarande inte hur lång en meter är så ... =)

Då fick jag mig dagens första stora skratt

Men där ligger mycket i det, vad korkade dem är där borta, vi är sååå mycket smartare

 

[17843]

Alltid tacksam for inlagg som gor mig klokare men att just det har ar buggigt i IE visste jag redan (aven om det gar att arbeta sig runt ganska enkelt).

 

[17843]

Se dar ja! Stort tack!

 

[flora50]

Tackar för poängen!