Denna delen av 99 uppdateras inte längre utan har arkiverats inför framtiden som ett museum.
Här kan du läsa mer om varför.
Mac-nyheter hittar du på Macradion.com och forumet hittar du via Applebubblan.

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

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

Jag har testat igen men jag upplever ändå att det "blinkar till". Klickar man på en undermeny så försvinner den innan den dyker upp igen, är det i CSS'en problemet ligger?

Konstigt, har inte hört talas om en sådan, kanske är det meningen att man ska göra en själv?

edit: hittade en sådan i ndxz-studio/site/sample och kopierade den till centered theme-mappen.. någon som har IE och kan kolla hur det ser ut?

editedit.. gäller bara vid IE6..härlisch..

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

Jag har testat igen men jag upplever ändå att det "blinkar till". Klickar man på en undermeny så försvinner den innan den dyker upp igen, är det i CSS'en problemet ligger?

Nej, jag ser det och det förbryllar mig en smula. När jag testade på min lilla lokala upplaga av "horizontal-menu", så betedde den sig som jag hade hoppats. Om allt annat som är konstant på sidan inte blinkar, borde även den aktiva undermenyn, som inte rörs av js-skriptet, inte blinka...

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

lägger du till

if(window.location.toString() == 'http://www.kristoffernilsson.se/'){$('#menu ul li ul').hide();}

efter rad 3 i js-skriptet, så slipper du att info-undermenyn visas på startsidan.

hm..fick det inte att fungera.. kollat i FF o Safari och provat att lägga det direkt efter, med mellanslag och med radbyte..

  • Medlem
  • Göteborg
  • 2010-04-04 19:25

Om menyblinket:

Om man vänder på steken och döljer ickeaktiva undermenyn med css:

#menu ul li ul {
	display: none;
	position: absolute;	
	margin: 0;
	left: 0;
}
#menu ul li ul.active {
	display: block;
}

och sedan struntar i att dölja det med js:

$(document).ready(function(){
	//göm undermenyn om startsida
	if(window.location.toString() == 'http://www.kristoffernilsson.se/'){$('#menu ul li ul').hide();}
		
	//visa aktuell undermeny när man klickar på menyn.
	$('#menu ul li').click(function(){
		$('#menu ul li ul').slideUp(300);
		$(this).children('ul').slideDown(500);
	});
});

Funkar det bättre?

mja, blinkar gör det fortfarande, kanske att det gör det på ett snyggare sätt nu?

  • Medlem
  • Göteborg
  • 2010-04-04 19:54

Jag går bet på det just nu...

Det finns ett annat problem på alla sidor: det saknas en "</div>" sist på sidan innan "</body>". Det kan du lägga till i ndxz-studio/site/the_centered_theme/index.php.

  • Medlem
  • Göteborg
  • 2010-04-04 19:59

När man ändå spanar efter fel som bör/kan rättas (det finns fler som kanske är besvärligare att komma åt utan att pula mer runt i php-filerna):

på sidan Bataxer & Atabolter : Kristoffer Nilsson

<h10>Klicka på bilderna för att se dem i stort format!</h10>

det finns ingen html tag h10. Det högsta är h6.

Tror jag fixade div-taggen.. nä, jag ska in i fixa till det..

  • Medlem
  • Göteborg
  • 2010-04-04 20:12
Ursprungligen av klarabara:

Tror jag fixade div-taggen.. nä, jag ska in i fixa till det..

förvisso blev det bättre på första sidan, men alla gallerisidor fick en div för mycket... Det verkar var olika mallar som styr. så det kanske inte var rätt fil jag pekade på.

aha.. fixade tillbaka sålänge.. satt o försökte lura ut vart jag ska lägga en id="current" nånstans, jag gissar att det är i /centered theme/index.php men jag tror jag fastnat där.. för att hitta på nya "problem" sådär..

  • Medlem
  • Göteborg
  • 2010-04-04 20:52
Ursprungligen av klarabara:

satt o försökte lura ut vart jag ska lägga en id="current" nånstans, jag gissar att det är i /centered theme/index.php men jag tror jag fastnat där.. för att hitta på nya "problem" sådär..

På vadå? I vilket syfte? (id-et, alltså)

Tanken var att man på så vis skulle kunna se vilken sida man var på, nu blir det ju en lång radda med serier osv. så man ska kunna styla den aktiva tabben, om det nu går?

Webdesignskolan, Infoga CSS-meny med PHP include

  • Medlem
  • Göteborg
  • 2010-04-04 21:12

Faktum är att du har (nästan) allt du behöver i koden nu: class="active" på undermenyns li-tag och dess övergripande ul. Man kan propagera det på huvudmenyns li med en rad javascript:
$('ul.active').parent().addClass('active');
(lägg till det som en egen rad länst ner i js-filen innan det avslutande }); )

Vipps can du css-styla li.active på lämpligt sätt och få den nuvarande sidan synligare i menyn.

Känner mig lite dum nu men..jag får hela undermenyn stylad, inte bara aktiva sidan..

Jag har skapat en #menu li.active med bakgrund i cyan den syns inte.. och i #menu ul il ul.active så har jag grönt.. hiskeligt jag vet, just a tryout..

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

Om man håller det enkelt och färgar enbart texten:
huvudmenyn är enkel. Undermenyn måste man dra ner ända till a-taggen för att bypassa den allmänna a-stylingen:
#menu li.active, #menu li ul li.active a {
color: #4d8d20;
}
(grönt var det )

weee det funkar! Men nu försvinner hela undermenyn när man klickar..hur kommer det sig? O byter jag till font-weight bold blir ändå hela undermenyn bold..

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

"Outgrundliga äro css-ens vägar"
Det finns en förklaring till beteendet: ul ärver från överliggande li. Jag körde på color. Egentligen var alla texter i undermenyn färgade, men iom att de även var länkar (a-taggar) och att a hade stylats med en färg, så var det det som visades för de som inte var classade "active". I ditt fall med font-weight, finns det inget motsvarande redan definierat i css för a, därför visas de feta. Parera med följande css:

#menu li ul.active {font-weight: normal;}

att undermenyn har försvunnit beror på att:

#menu ul li ul.active {
display: block;
}

har ramlat ur din css.

summerat:

#menu ul li ul.active {
display: block;
font-weight: normal;
}

  • Medlem
  • Göteborg
  • 2010-04-04 23:52

Obs att class="active" finns på tre olika nivåer: #menu ul li.active, #menu ul li ul.active och #menu ul li ul li.active
Det gäller att hålla tungan rätt i mun:

#menu ul li.active, 
#menu ul li ul li.active a {
	font-weight: bold;
}
#menu ul li ul.active {
	display: block;
	font-weight: normal;
}

Ja, jag satt u klurade på det där.. fattade inte riktigt. Jag ska ta tag i det där efter en god natts sömn.

Aaaaah... så skulle det vara!

Jag provade med att ta bort värdet för slideup i java-scriptet och nu halvblinkar det bara?

$('#menu ul li ul').slideUp();

Edit: Jag provade att ta bort hela raden och nu stannar menyn! wohoo!
Edit edit.. ja.. och nu hamnar det påvarandra.. ctrl-z.

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

Jag provade med att ta bort värdet för slideup i java-scriptet och nu halvblinkar det bara?

$('#menu ul li ul').slideUp();

Edit: Jag provade att ta bort hela raden och nu stannar menyn! wohoo!
Edit edit.. ja.. och nu hamnar det påvarandra.. ctrl-z.

Det precis anledningen varför den raden kom med...
Ett annat försök (som sagt, det blinkar inte när jag kör lokalt):

$(document).ready(function(){
	//Special för framsidan: göm alltid undermenyn och låt bli att lägga till class active
	if(window.location.toString() == 'http://www.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').click(function(){
		$('#menu ul li ul').slideUp(300);
		$(this).children('ul').slideDown(500);
	});
});

Varför skall det funka bättre? Därför att med det gamla skriptet, när man klickade på undermenyn, i och med att den är en underdel av dess menyrubrik, så triggas skriptet igång. Sedan tar den nya sidan lite tid att ladda ner, varför menyn hinner åka upp och ner innan den nya sidan visats. I denna utförande skall skriptet inte triggas om man klickar på en del som tillhör den aktiva menyn (som tex den synliga undermenyn).

Senast redigerat 2010-04-05 14:17

Det halvblinkade.. om man försöker att bara ladda om undermenyn om man klickar på övermenyn? Eller det är kanske det som scriptet borde göra redan nu?

Provade och sätta värdet på slide-up till 0 och nu laddar hela under-menyn om.. kan det vara nån annanstans som sådant avgörs?

  • Medlem
  • Göteborg
  • 2010-04-05 14:06

Det är bara att inse: min teori stämde inte...

men...

jag gjorde ytterligare en justering i koden ovan (la till > mellan menu ul och li) för att rikta mot just li som är direkt under ul som är direkt under #menu. Det som hände innan var att den selektorn även innefattade underliggande li, dvs undermenyn.

Vill du testa igen?

hm.. den är nåt som blir annorlunda som inte ligger i scriptet tror jag.

  • Medlem
  • Göteborg
  • 2010-04-05 15:33

Som info, för att jämföra lokalt vs remote så har jag lagt upp mitt meny-skript här:
Horizontal menu
Det är korta sidor, så även där laddas de rätt fort. Jag upplever dock att den beter sig som väntat: ingen omladdning av undermenyn från en sida till en annan.

Hm.. jag skulle nog säga att det händer där med, men det går väldigt fort..

  • Medlem
  • Göteborg
  • 2010-04-05 16:40

Ok, jag ger mej. För ibland ser även jag att den gör det vid vissa omladningar...

Men jag är envis som synden (ibland iaf). Ytterligare en uppdatering (du får säga ifrån om det är störigt ). Det är en kombination av mina teorier ovan: jag var inte helt ute och cyklade, men nådde inte hela vägen. Men nu: Ingen tillstymmelse till blinkning för mig. Inte ens från mina svärföräldrars pc med IE8 som klickar och har sig vid varje sidomladdning. (samma länk som ovan).

Fan, det där klickandet hade jag förträngt..kommer nog inte ladda ner IE om jag inte får betalt för det..

Ja det ser mindre ut nu, svårare att avgöra när det blir fet stil för då blir det ju även större.. hur testar jag det på "irl"?

Jag är super-imponerad! Jag trodde jag var den enda som var så här envis...

Bevaka tråden