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

Tråden skapades och har fått 78 svar. Det senaste inlägget skrevs .

Jag sitter som kanske bekant och sliter med min egen sida och CSS men så gör jag även min pappas; Om den här sidan : Kristoffer Nilsson

Jag hade tänkt göra menyn som på dn.se, alltså att under-menyn kommer ut på en rad under inte som nu i en vertikal linje..

Om detta nu är knepigt att göra så kan jag ju försöka fejka det istället men det känns onödigt att helt ge upp innan man vet. Jag har googlat o frågat runt o testa inline osv.. men inte hittat det jag söker..någon som vet?

Oerhört tacksam för all hjälp!

Klara(bara)

  • Medlem
  • Göteborg
  • 2010-04-01 18:58

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 där verkar vara super! jag ska ge det ett helhjärtat försök ikväll!

Tack så mycket!

Jag har verkligen försökt här men jag får det inte att fungera.. har provat en del olika varianter med det enda resultatet att sidan blir helt blank. Jag tror det har att göra med att scriptet säger "hide all divs" eller nåt sånt men det är kanske fler divs på sidan än så?

Om någon kan ge en fingervisning till hur jag ska få in bara funktionen att den brer ut sig på höjden men inte på bredden oavsett färger osv..?

Det här är det script jag har nu..

function expandingMenu(num) {
var speed = 300;

var item_title = $("#menu ul").eq(num).children(":first");
var items = $("#menu ul").eq(num).children().filter(function (index) { return index > 0; });

/* initialize by hiding sub-menu items */
items.hide();

/* add click functions + pointer to title */
item_title.css({cursor:"pointer"}).toggle(
function () {
items.slideDown(speed);
}, function () {
items.slideUp(speed);
}
)
}

  • Medlem
  • Göteborg
  • 2010-04-03 00:40

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

  • Medlem
  • Göteborg
  • 2010-04-03 01:05

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?

WoW vilken research! *impressed*
Jag är dock inte helt säker på vad du menar..byter jag koden får jag då en chronological? För det kan jag enkelt byta i deras web-baserade eh..program? Det gör att sidan blir baserad på när man la upp sakerna istället för som nu med rubriker..nu verkar det inte göra en så stor skillnad för projekten som redan ligger där, kanske mer för de som kommer.

Men om den ligger som chronological, är det möjligt att fixa menyn då?
Alternativt, om jag byter koden där så är det enklare att fixa?

Det som jag inte fattar är om det är java-skriptet som väljer hur undermenyn ska se ut eller css-filen? När jag ändrar den del i CSS-filen som styr under-menyn så verkar den delen ändra även hur "övermenyn" ser ut? Är det det du menar med första inlägget?

  • Medlem
  • Göteborg
  • 2010-04-03 22:30
Ursprungligen av klarabara:

WoW vilken research! *impressed*

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.

Ursprungligen av klarabara:

byter jag koden får jag då en chronological? För det kan jag enkelt byta i deras web-baserade eh..program?

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.

Ursprungligen av klarabara:

Det som jag inte fattar är om det är java-skriptet som väljer hur undermenyn ska se ut eller css-filen?

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

Ursprungligen av klarabara:

När jag ändrar den del i CSS-filen som styr under-menyn så verkar den delen ändra även hur "övermenyn" ser ut? Är det det du menar med första inlägget?

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.

så.. jag vågade. Jag insåg efter lite muppande att du hade lagt en zip-fil där, ser ju superbt ut!
Tyvärr verkar den nu ha tappat bort vad som är övermeny och vad som är undermeny och jag har ingen aning om vart det blivit knasigt.. Jag har ju åtta sektioner men det visas bara tre, är det något i CSSen som avgör det?
Men de kommer ner på en vacker horisontell rad!

Edit:
Tar jag bort "the separator" på rad 45 i
ndxz-studio/site/the_centered_theme/index.php
så kan jag inte klicka på något alls längre..

Senast redigerat 2010-04-04 10:50
  • Medlem
  • Göteborg
  • 2010-04-04 13:53
Ursprungligen av klarabara:

så.. jag vågade. Jag insåg efter lite muppande att du hade lagt en zip-fil där, ser ju superbt ut!
Tyvärr verkar den nu ha tappat bort vad som är övermeny och vad som är undermeny och jag har ingen aning om vart det blivit knasigt.. Jag har ju åtta sektioner men det visas bara tre, är det något i CSSen som avgör det?
Men de kommer ner på en vacker horisontell rad!

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.

  • Medlem
  • Göteborg
  • 2010-04-04 13:56
Ursprungligen av klarabara:

Edit:
Tar jag bort "the separator" på rad 45 i
ndxz-studio/site/the_centered_theme/index.php
så kan jag inte klicka på något alls längre..

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

http://www.kristoffernilsson.se/koettresan/%3EKöttresan%3C/a%3E%3C/li%3E%3Cli%3E%3Ca%20href=

en konstig url det där, särskilt den här biten..
%3EKöttresan%3C/a%3E%3C/li%3E%3Cli%3E%3Ca%20href=

det är sant.. kan det vara bekymret? Home : the Centered Theme

det borde inte vara det för ett tema är ett tema.. ändrar man i index.php för den så borde det ju ändras i alla teman? Eller borde jag kanske ändrat i index.php inne i centered theme-mappen?
Prövar det när kaffet är klart..

  • Medlem
  • Göteborg
  • 2010-04-04 14:07

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){}

hm.. inte säker på att jag hänger med i javascript biten nu.. den fil som låg i zip-mappen och hette "menu.js" döpte jag om till expandingMenus.js.. det kanske var första felet..?

den här raden "function expanding menu (n)..." vilken fil ska den vara i?

  • Medlem
  • Göteborg
  • 2010-04-04 14:23
Ursprungligen av klarabara:

hm.. inte säker på att jag hänger med i javascript biten nu.. den fil som låg i zip-mappen och hette "menu.js" döpte jag om till expandingMenus.js.. det kanske var första felet..?

den här raden "function expanding menu (n)..." vilken fil ska den vara i?

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

ojojoj!! Nuseru.. inlägget med ' i gjorde skillnad! dock undrar jag, när man väljer en rubrik i under-menyn så kommer info-menyn ner igen..hur tar jag bort det?

Vilken mjuk animation det gör också, lekker!

  • Medlem
  • Göteborg
  • 2010-04-04 14:42
Ursprungligen av klarabara:

ojojoj!! Nuseru.. inlägget med ' i gjorde skillnad! dock undrar jag, när man väljer en rubrik i under-menyn så kommer info-menyn ner igen..hur tar jag bort det?

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/')){
  • Medlem
  • Göteborg
  • 2010-04-04 15:03
Ursprungligen av klarabara:

Vilken mjuk animation det gör också, lekker!

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.

  • Medlem
  • Göteborg
  • 2010-04-04 14:51

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

done!

Är det med padding som jag kan få undermenyn att hamna centrerat under det jag klickat på?
Eller kanske i vart fall centrerat?

  • Medlem
  • Göteborg
  • 2010-04-04 15:11
Ursprungligen av klarabara:

Är det med padding som jag kan få undermenyn att hamna centrerat under det jag klickat på?
Eller kanske i vart fall centrerat?

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.

Aaah.. nice! Nu laddas de också om varje gång man klickat på en under-meny, går det att få så de ligger kvar?

  • Medlem
  • Göteborg
  • 2010-04-04 15:29
Ursprungligen av klarabara:

Aaah.. nice! Nu laddas de också om varje gång man klickat på en under-meny, går det att få så de ligger kvar?

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".

mja.. kan ju också flytta på de rubriker som inte har så många under-rubriker och på så vis få det att se ut som om allt hamnar rätt? Somliga ska inte vara som under-rubriker alls egentligen.. ska testa lite!

ah.. jag tror jag hajar.. men går det inte att få så den stannar nere tills man klickar på nästa övermeny och då byts den? Nu försvinner den så fort man klickat på en, sen kommer den tillbaka..den laddar visserligen sidan så det kanske handlar om att ha en frame istället?

Bara för att höra, vill _inte_ göra en stor apparat av det..

  • Medlem
  • Göteborg
  • 2010-04-04 17:21
Ursprungligen av klarabara:

ah.. jag tror jag hajar.. men går det inte att få så den stannar nere tills man klickar på nästa övermeny och då byts den? Nu försvinner den så fort man klickat på en, sen kommer den tillbaka..den laddar visserligen sidan så det kanske handlar om att ha en frame istället?

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.

Senast redigerat 2010-04-04 18:21

jag måste ha gjort något snett för hela sidan vart blank..

Första klippet satte jag in i /plugin/index.php
det andra i dropdown-menu,js?

Min pappa har tittat på den på ett internet-café, troligtvis med IE och vissa sidor "kom upp i blått och kunde inte laddas" vad nu det egentligen betyder..

  • Medlem
  • Göteborg
  • 2010-04-04 18:27
Ursprungligen av klarabara:

Min pappa har tittat på den på ett internet-café, troligtvis med IE och vissa sidor "kom upp i blått och kunde inte laddas" vad nu det egentligen betyder..

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").

  • Medlem
  • Göteborg
  • 2010-04-04 18:22

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.

Bevaka tråden