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 .
  • Medlem
  • Göteborg
  • 2010-04-05 22:06

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

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

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

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.

Ursprungligen av klarabara:

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

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

Hm.. jag får det tyvärr inte att fungera.. eller ja.. jag ser bara inte skillnaden.. men jag har ju druckit lite rödvin (mycket god middag).. jag ser dock att det fortfarande laddas om..

  • Medlem
  • Göteborg
  • 2010-04-06 00:06

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

Senast redigerat 2010-04-06 00:25

LOL. suttit och trott jag laddat upp det på min pappas sida.. cyberduck o två fönster.. galet..
Det fungerar helt lovely. You did it!! Wohoo!

Tack så oerhört mycket för all hjälp!!

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.

Ja... Pichia: hur gjorde du för att få den i ett "kod-fönster"? Eller vill du copy-pasta? Kanske kan hänvisa indexhibit-användare hit också..

  • Medlem
  • Göteborg
  • 2010-04-06 06:26
Ursprungligen av klarabara:

Ja... Pichia: hur gjorde du för att få den i ett "kod-fönster"?

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

Baserat på; indexhibit.org och; Home : the Centered Theme

På egen risk:

1 I filen: ndxz-studio/site/js/expandingMenus.js Byt ut hela klabbet mot följande..

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

2 I mappen: ndxz-studio/site/js/ ska du även lägga jquery-filen som jag tagit ut från den zipfil pichia postade i inlägg #5|5. [attachment=""]Bifogar som zip-fil..[/attachment]

3 I filen; ndxz-studio/site/plugin/index.php I den del du föredrar, (sectional eller chronical) byt ut det stycket mot det här..

function sectional()
{
	$OBJ =& get_instance();
	global $rs;

	$pages = $OBJ->db->fetchArray("SELECT id, title, url, 
		section, sec_desc, sec_disp, year, secid    
		FROM ".PX."objects, ".PX."sections 
		WHERE status = '1' 
		AND hidden != '1' 
		AND section_id = secid  
		ORDER BY sec_ord ASC, ord ASC");
		
	if (!$pages) return 'Error with pages query';
	
	foreach($pages as $reord)
	{
		$order[$reord['sec_desc']][] = array(
			'id' => $reord['id'],
			'title' => $reord['title'],
			'url' => $reord['url'],
			'year' => $reord['year'],
			'secid' => $reord['secid'],
			'disp' => $reord['sec_disp']);
	}
	
	$s = "<ul>\n";
		
	foreach($order as $key => $out){
		$ul_active = 'ul';		
		if ($out[0]['disp'] == 1){
			$s .= "<li><span>$key</span><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";

	return $s;
}

4 I mappen: ndxz-studio/site/thecentered_theme/ Finns det ingen ie.css, kopiera en från; ndxz-studio/site/sample/

5 I filen: ndxz-studio/site/thecentered_theme/index.php Ta bort följande.

expandingMenu(0);  
	expandingMenu(1);  
	expandingMenu(2); 
	expandingMenu(3);
	expandingMenu(4);
	expandingMenu(5);
	expandingMenu(6);
	expandingMenu(7);
	expandingMenu(8);

6I filen ndxz-studio/site/thecentered_theme/style.css så var det lite mycket..
men jag tror det viktigaste var;

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

Tadaaa!

Jag bifogar hela css-filen också, ifall det blir kladdigt..
Jag har länkat den här tråden hos indexhibit ifall det skulle vara nån därifrån som vill veta..

Om någon ser att det blivit knasigt nånstans är det bara att säga till så eddar jag!

Slutligen skulle jag vilja ge mina varmaste Applåder för pichia som gjorde det här möjligt!

Hurra Hurra Hurra HURRA!!!

(jag blev lite besviken över att jag inte fick använda lite färg, det var motiverat den här gången..

Senast redigerat 2010-04-06 13:20
  • Medlem
  • Göteborg
  • 2010-04-06 13:11

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 == "/"){

Grejt, editerat!

Har stött på problem med menyn och IE8.. eller alla IE.

Får error när det gäller jquery vad gäller thickbox men menyn får jag direkt error på.
Men det blir att hela undre raden läggs ovanpå den övre så det blir ett gytter.

En kompis trodde det var i; class='active' eller i expandingMenus.js

Jag bytte: #menu ul li ul { display: none; position: absolute; margin: 0; left: 0; }
Mot: #menu ul li ul { display: none; position: inside; margin: 0; left: 0; }

Men då fungerade det inte i Safari längre så jag skrev

#menu ul li ul { display: none; position: absolute; margin: 0;left: 0; }
html>body #menu ul li ul { display: none; position: inside; margin: 0; left: 0; }

Men i IE8 gav det ingen förändring alls, kan vara att det hacket bara funkade i IE7.

Någon som har en idé hur jag ska få det här att funka i IE?
Om mig : Kristoffer Nilsson

Mycket tacksam för hjälp!

ps. Jag har ännu inte kommit på hur man ska få en fin bakgrundsfärg på hela undre raden och den aktiva delen över övre.. så där är all hjälp välkommen med.

  • Medlem
  • Göteborg
  • 2010-05-11 16:14

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

  • Medlem
  • Göteborg
  • 2010-05-12 08:04

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.

För menyn: Jag har nu lagt upp samma fil som vanliga CSS fast med ändringen och döpt till ie.css. Skrev om så det står [if IE]... i php-filen med. Ska testa om nån timma i IE, måste boota om...

"*" konstigt, när jag kollar i koden så står alla värden som exakta? Jag tog bort transparensen och png-formatet på bilden, har förstått att det blir knas i IE. Det vart en jpg-istället, utan width-värdet, hoppas den syns.

Ja, jag hade tänkt att den skulle vara ganska minimalistisk ändå, med bara en tunn (väldigt ljus) grå bakgrund men jag fick inte ihop det... Jag hade rosa som visited på allra första versionen så det tål ju att tänkas på!

  • Medlem
  • Göteborg
  • 2010-05-12 10:07
Ursprungligen av klarabara:

För menyn: Jag har nu lagt upp samma fil som vanliga CSS fast med ändringen och döpt till ie.css. Skrev om så det står [if IE]... i php-filen med. Ska testa om nån timma i IE, måste boota om...

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.

Alright, ändrade så jag bara la till #menu ul li ul taggen efter #menu.

Hade IE6 installerat på xp.. det såg inte vackert ut men det funkar någorlunda!
Det konstiga är att nu ligger logotypen och innehållet på en slags sida under menyn som är fixerad. Och det är antingen att texten på tex Claustrofobia : Kristoffer Nilsson som hoppar upp och lägger sig i menyn, inte allt men de första raderna.

Eller som på Kontakt : Kristoffer Nilsson där det blir ett jätteglapp och sen som en scroll-rad och efter det kommer text. Scrollar man ner (och det måste man göra på många av sidorna) så scrollar man bort logotypen och allt scrollar under menyn, vilket såklart är bättre än över

Har en känsla av att det är mina div:ar som gör det..

  • Medlem
  • Göteborg
  • 2010-05-12 12:24
Ursprungligen av klarabara:

Har en känsla av att det är mina div:ar som gör det..

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.

Underbart! Helt amazing, det funkar!

Det där med wrappen, vilken sida dyker det upp på?

Bevaka tråden