Meny som sprider sig under som på DN.se?

För att tillämpa det senaste exemplet "irl":

Det finns en rad som måste bytas ut i php för sequencial() i /ndxz-studio/site/plugin/index.php:

$s .= "<li>$key<ul class=''>\n";

skall vara

$s .= "<li><span>$key</span><ul class=''>\n";

Sedan måste js-filen anpassas därefter:

$(document).ready(function(){
	//Special för framsidan: ingen undermeny eller "active" meny
	cUrl = window.location.toString();
	if((cUrl == 'http://www.kristoffernilsson.se/') || (cUrl == 'http://kristoffernilsson.se/')){
		$('#menu ul li ul').hide();
	}else{
		$('ul.active').parent().addClass('active');
	}
		
	//visa aktuell undermeny när man klickar på menyn.
	$('#menu ul li span').click(function(){
		$('#menu ul li ul').slideUp(300);
		$(this).next('ul').slideDown(500);
	});
});

Jag tror inte jag har rört css-en.

Vad är det som är ändrat?
Själva menytexten finns numera i ett span, och det är det spannet och inget annat som är målet för sj-skriptet (och därför åker inte undermenyn upp och ner när man klickar runt på den). Skillnaden blir att det ul som skall visas är efter spannet, istället för inom meny-li. och därför använder jag .next() isf .children().

Sen har jag kompletterat framsides-specialen så att den fungerar med eller utan www i adressen (du länkar specifikt till kristoffernilsson.se i huvudbilden).

Säger du till en som är fast i IE6-kletet på jobbet. Men å andra sidan kan man ju anse att jag "får betalt" för det.

Det en last jag har, på gott och ont, att lätt fastna i detaljer, även om de inte är superviktiga. Du skrev uttryckligen att du "vill _inte_ göra en stor apparat av det", men även jag hade redan retat mig på det och tänkte att det verkligen borde finnas ett enkelt sätt att lösa det... (senaste förslaget är inte nämnvärt annorlunda än det ursprungliga, bara lite mer polerat.)
Påskhelgen är slut nu, så jag hoppas att lösningen även skall fungera på din site...

Jag tycker att det fungerar, iaf på din egen sida. Ladda om ordentligt, så att du inte ser en cachad version.
Och kanske dags för en till natt sömn...

Nu när ni varit så duktiga, kan inte koden sammanfattas lite om det finns någon annan som skulle vilja spara den för regniga dagar? Kan vara bra att ha en menu extra att välja på vid något tillfälle.

Det och en massa annat gott:
phpBB - BBCode guide

Exakt vilka som funkar här på 99.se, vet jag inte riktigt. Men åtminstone code och b

Tack själv, det var en kul helgnöt att knäcka. Det finns säkert en uppsjö med horizontella menyer att hämta från nätet. Fördelen med att återuppfinna hjulet är att man kan uppfinna ett runt hjul (citat, vem det nu var som sade detta), dvs något som passar just ens behov.

Jag har säkert fler kommentarer till sammanfattningen ovan, och här är en:

Jag upptäckte att det finns ett lite smartare sätt att identifiera om man är i rooten på siten. Och då kan man göra js-skriptet mer siteoberoende. man kan med fördel ersätta:

cUrl = window.location.toString();
if((cUrl == 'http://www.kristoffernilsson.se/') || (cUrl == 'http://kristoffernilsson.se/')){

med:

if((window.location.pathname == "/"){

Det bästa sättet att tackla problem med IE är att ha en separat css till IE. Låt det som fungerar i Safari FireFox och Opera vara orörd i huvudmallen och ändra endast nödvändiga regler i IE-mallen, som laddas efter endast i IE och därmed får prioritet i css-tolkningen. (FYI, du har redan en sådan: http://www.klaranilsson.com/ndxz-studio/site/thecentered_theme/ie.css men skall den gälla för alla IE, bör den villkorade kommenteringen vara <!--[if IE]> isf <!--[if lte IE 6="6"]> - i princip bör du kunna strunta i IE 6 och lägre).
Kolla däri att den css-en finns där idag inte sabbar mer än den tillför.

position: inside; existerar inte och borde inte vara "lösningen". list-style-position:inside; existerar däremot men är nog inte aktuellt heller.

skall se om jag hinner titta lite snabbt på det i morgon bitti...

Nu har jag tittat lite snabbt i IE 7och konstaterat att det var samma problem med min lilla horizontal-menu demo som jag länkade till i ett tidigare inlägg.
lösningen blev ett separat stylesheet för ie:
I sidans head, efter länken till den vanliga css:

Stilmallen är då riktad till alla IE.

För menyn, den enda innehållet som behövs är:

#menu ul li ul {
     top: 20px;
}

Jag drog till med 20px. Du får jämföra och tycka hur mycket det egentligen behövs.

Obs att du fortfarande har bilder med width="*" i din kod, i synnerhet titelbilden, som inte syns i IE.

Angående bakgrundsfärg i menyn. Klart det går att fixa. Kanske måste man se över lite padding vs margin på sina håll för att få det sammanhängande, men jag tycker att det är en dålig idé överhuvudtaget. Du har en väldig minimalistisk sida utan kanter och gränser förutom bilderna själva. Menyn skall egentligen inte göra så mycket väsen av sig. Det kommer att se galet ut med en kantig färgpalett i menyn mitt i allt det vita. Då är det bättre att leka med textfärgen: tex tona ner de andra huvudmenyer som inte är aktiva, kanske använda färgen i din titelbild för att markera den aktiva sidan... Min åsikt bara.

Lägg inte hela sitens css i den filen, bara de ändringar som behövs för att få till det. IE använder den vanliga filen också. Det blir bara dubbelt jobb och svårt att underhålla.

Jo, för så var det inte tidigare i morse. Html validator säger också att #wrapper diven inte är stängd. (men det kan vara en annan div innanför som felar)

Jag tycker du även skall "ifrågasätta" innehållet i din ie.css som har bara följt med. Den var egentligen riktad till IE 5.5 och lägre och kanske bara ställer till det mer än den gör nytta. Ta bort allt (förutom dagens övning) och kolla om det funkar ändå.

i synnerhet den här:

* html div#menu {
width: 20%;
}

låter som en bov som kan förklara menyn is skrollytan till vänster.