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

Om du i dagsläget klarar att göra huvudmenyn horisontell borde du väl fixa att göra eventuell undermeny på den ledden också kan man tycka... Det är inga konstigheter.

Hinner inte kika närmare på din sida för närvarande, men ser att du använder jQuery. Denna kanske kan ge lite ledning om du vill använda halvfabrikat: hype-free: Creating a horizontal menu with jQuery

Det grundläggande problemet du har är att html-koden som genereras för din meny inte så gärna böjer sig för sådanna tillämpningar. Den har strukturen so följande:

<ul>
	<li class="section-title">menu 1</li>
	<li>undermenu 1 rad 1</li>
	<li>undermenu 1 rad 2</li>
	<li>undermenu 1 rad 3</li>
</ul>
<ul>
	<li class="section-title">menu 2</li>
	<li>undermenu 2 rad 1</li>
	<li>undermenu 2 rad 2</li>
</ul>
...

menuhuvuden är det första elementet ur en ul-lista som bygger även de underliggande menyraderna. Det blir svårt att greppa hela gruppen li-taggar som bygger undermenyn och styla den som ett eget block utan att påverka titel-elementet.

det hade varit lättare om listan hade varit mer hierarkisk som följande:

<ul>
	<li>menu 1
		<ul>
			<li>undermenu 1 rad 1</li>
			<li>undermenu 1 rad 2</li>
			<li>undermenu 1 rad 3</li>
		</ul>
	</li>
	<li>menu 2
		<ul>
			<li>undermenu 2 rad 1</li>
			<li>undermenu 2 rad 2</li>
		</ul>
	</li>
	...
</ul>

I följande länk finns ett litet exempel med css och script om hur man kan fixa det:
http://dl.dropbox.com/u/3714220/horizontal_menu.zip

Jag laddade ner indexhibit från deras site. En snabb sökning bland filerna, utan att köra igång det gav följande:

i filen /ndxz-studio/site/plugin/index.php

finns två funktioner, chronological() och sectional(), som har följande avsnitt som verkar generera menyns html-kod:

$s = '';
	
	foreach($order as $key => $out)
	{
		$s .= "<ul>\n";
		
		if ($out[0]['disp'] == 1) $s .= "<li class='section-title'>" . $key . "</li>\n";
		
		foreach($out as $page)
		{
			$active = ($rs['id'] == $page['id']) ? " class='active'" : '';
				
			$s .= "<li$active><a href='" . BASEURL . ndxz_rewriter($page['url']) . "' onclick=\"do_click();\">" . $page['title'] . "</a></li>\n";
		}
		
		$s .= "</ul>\n\n";
	}

	return $s;

Byter man den mot detta:

$s = "<ul>\n";
	
	foreach($order as $key => $out){		
		if ($out[0]['disp'] == 1){$s .= "<li>$key<ul>\n";}
		
		foreach($out as $page){
			$s .= "<li><a href='".BASEURL.ndxz_rewriter($page['url']).">".$page['title']."</a></li>\n";
		}
		
		if ($out[0]['disp'] == 1){$s .= "</ul>\n</li>\n";}
	}
	$s .= "</ul>\n";

	return $s;

så får man ut en hierarkisk lista som jag beskriver ovan.

Tror jag i alla fall. Jag har inte kunnat testa det live. Vågar du?

Klicka på länken till indexhibit. ladda ner deras installationspaket. Öppna mappen som en site i Coda. Söka på "section-title" (som jag visste om sen tidigare att den ingick i den aktuella koddelen för menyn) i hela siten och vipps så dök dessa två funktioner upp. Det tog inte många minuter.

Båda funktionerna chronological() och sectional() innehåller koden. Så jag antar att den funktionen du ändrar påverkar det motsvarande sättet att visa. Har du valt att visa dina saker i rubriker antar jag att du skall ändra i sectional().
Ett sådant web-baserat program brukar man kalla CMS (Content Management System), där målet är att få användaren att kunna fokusera på innehåll snarare än html/css.

utseendet (horizontal eller vertikal, färger, mm) styrs helt av css, beteendet (visa och dölj när man klickar) av javaskriptet.

Just precis. Har du en underligande ul som grupperar undermenyn, så har du plötsligt helt nya möjligeter att styla den oberoende av dess övermeny.

Alla 8 är med i html-koden, det bara ett (kanske fler dyker upp) litet fel i min kod som gör att det blir kajko:

$s .= "<li><a href='".BASEURL.ndxz_rewriter($page['url']).">".$page['title']."</a></li>\n";

saknar en stängande ' i href attributen. Det skall vara:

$s .= "<li><a href='".BASEURL.ndxz_rewriter($page['url'])."'>".$page['title']."</a></li>\n";

ser du inte skillnaden, kör bara copy/paste på den raden.

Den mappen, the_centered_theme, följde inte med det paket jag laddade ner.

Det bli ett javascriptfel på sidan för att funktionen expandingMenu anropas i början av sidan, men eftersom vi har tagit bort den från javascriptfilen till förmån för ren jQuery, så hittas den inte. Man kan enkelt undvika det felet genom att definiera om funktionen expandingMenu i javascriptfilen som en funktion som inte gör något, genom att lägga till den raden:

function expandingMenu(n){}

Du gjorde rätt. Det är i slutet av filen "expandingMenus.js" som du skall lägga det.

Men nu när jag ser "the Centered Theme" filerna kan man göra så istället:

i filen: ndxz-studio/site/the_centered_theme/index.php

ta bort raderna:
expandingMenu(0);
expandingMenu(1);
expandingMenu(2);
expandingMenu(3);
expandingMenu(4);
expandingMenu(5);
expandingMenu(6);
expandingMenu(7);
expandingMenu(8);
från filen, så anropas inte funktionen överhuvudtaget

Det var en liten luring...

Det är för att under info-menyn finns "om den här sidan" som länkar till sitens rot, och villkoret som använd i rad 8 i javaskriptet blir alltid sant just för den, varvid info-menyn rullas ner.

Testa istället med den här raden:

if((cUrl.indexOf($(this).attr('href')) > -1) && ($(this).attr('href') != 'http://www.kristoffernilsson.se/')){

om du tittar i scriptet så är det slideDown(xxx) och slideUp(yyy) där xxx och yyy är tiden angiven i millisekund. Du kan leka med dessa värden. Ju större siffra, desto långsammare blir animationen.

när du ändå rotar i filen:
ndxz-studio/site/the_centered_theme/index.php

passa på att flytta in

<div class='container'>
<div id='indexhibit'>Built with <a href='http://indexhibit.org' title='Vaska/Eatock Indexhibit' target='_blank'><b>Indexhibit</b></a></div>
</div>

innanför body-taggen

Den frågan väntade jag på... Jag försökte att klura på den, men kom inte på någon enkel lösning.
Du kan få undermenyn centrerad på sidan ganska enkelt, men jag tycker inte det ger mer än om den är högerjusterad som nu.
Det skulle kunna gå att ange en individuell padding-right till varje undermeny, men då måste ha någon id eller class på varje meny att haka css-en på, men det har du inte från cms-en. om inte man gör som följande:

uppdaterad php för sectional()

$s = "<ul>\n";
	$sub_id = 1;
	
	foreach($order as $key => $out){		
		if ($out[0]['disp'] == 1){
			$s .= "<li>$key<ul id='sub_menu_$sub_id'>\n";
			$sub_id
		}
		
		foreach($out as $page){
			$s .= "<li><a href='".BASEURL.ndxz_rewriter($page['url']).">".$page['title']."'</a></li>\n";
		}
		
		if ($out[0]['disp'] == 1){$s .= "</ul>\n</li>\n";}
	}
	$s .= "</ul>\n";

nu har du en hake till css:

#sub_menu_1 {padding-right: xxpt;}
#sub_menu_2 {padding-right: yypt;}
#sub_menu_3 {padding-right: zzpt;}
...

där xx, yy och zz är lämpliga värden för att menyn skall upplevas centerad under dess rubrik. Men om du lägger till saker under den menyn, så måste du uppdatera padding-värdet.

Då laddas en ny sida och det är mellandelen av skriptet som ser till att den aktuella undermenyn åter visas. man kan göra så att animationen går snabbare (sänk värdet för slideDown(300)) eller så kan man välja att använda show() istället för slideDown(300), varvid menyn visas "så fort som möjligt".

Om man använder php skriptet för sectional() som följande:

$s = "<ul>\n";
		
	foreach($order as $key => $out){
		$ul_active = 'ul';		
		if ($out[0]['disp'] == 1){
			$s .= "<li>$key<ul class=''>\n";
		}
		
		foreach($out as $page){
			$active = ($rs['id'] == $page['id']) ? " class='active'" : '';
			if($active != ''){$ul_active = "ul class='active'";}
			$s .= "<li$active><a href='".BASEURL.ndxz_rewriter($page['url'])."'>".$page['title']."</a></li>\n";
		}
		$s = str_replace("ul class=''", $ul_active, $s);
		if ($out[0]['disp'] == 1){$s .= "</ul>\n</li>\n";}
	}
	$s .= "</ul>\n";

så skall den aktiva menyns ul få en class='active' (om jag int gjort någon tankevurpa).
I så fall kan man låta js-skriptet ha användning av det för att låta bli att initialt dölja den aktiva menyn, isf att i efterhand visa upp den:

$(document).ready(function(){
	//göm alla undermenyer som inte är den aktiva
	$('#menu ul li ul:not(.active)').hide();
		
	//visa aktuell undermeny när man klickar på menyn.
	$('#menu ul li').click(function(){
		$('#menu ul li ul').slideUp(0);
		$(this).children('ul').slideDown(500);
	});
});

då slipper du blinkeffekten vid siduppladdningen och får ett enklare skript på köpet.

Enligt sidan skall den använda en IE-anpassad stilmall:
http://www.kristoffernilsson.se/ndxz-studio/site/thecentered_theme/ie.css
Men den stilmallen verkar inte finnas. (man ramlar tillbaka till huvudsidan, villket verkar vara det standardbeteendet på siten vid "404- file not found").

Det var visst ett fel i koden - en rad som inte inte skulle vara där och som inte slutar med ; php är inte förlåtande för sådant slarvfel. Jag har rättat i mitt förra inlägg, så det är bara att testa igen.
js-skripet skall väl vara i (och ersätta) "expandingMenu.js", om du inte har döpt om den på något sätt.