Bakgrund på aktiv meny

10 svar · 863 visningar · startad av Gimbo 21 feb. 2012

GimboMedlem sedan dec. 20001 626 inlägg

Frågan21 feb. 2012 10:32#1

Hej,

Jag har alltid det här problemet på ett eller annat sätt blir tokig snart och skulle uppskatta all hj'älp jag kan få. Det är så att jag har en meny (med dropdown alternativ) och skulle vilja ha en bakgrund på det menyvalet som är aktivt. Vill även då de klickar på en undermeny att top alternativets bakgrund sätts.

så här ser min meny ut

<ul class="sf-menu">
			<li class="current">
				<div class="top1"><a href="#">Home</a></div>
				
			</li>
			<li class="current1">
				<div class="top1"><a href="#">Meny1</a></div>
			</li>
			<li class="current2">
				<div class="top1"><a href="#">Meny2</a></div>
				<ul>
					<li class="top2">
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
					<li>
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
							<li><a href="#">menu item</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<div class="top1">Meny4</div>
			</li>	
		</ul>

Vet inte hur jag ska lösa detta med css'erna, har en sån här variant:

.top1 {
	border-left:	0px solid #fff;
	border-top:		0px solid #CFDEFF;
	padding: 		.75em 1em;
	text-decoration:none;
	cursor: default;
	color: #661C78;
}

.sf-menu {
	float:			left;
	margin-bottom:	1em;
	margin-top:		2em;

}
.sf-menu a {
	border-left:	1px solid #fff;
	border-top:		0px solid #CFDEFF;
	/*padding: 		.75em 1em;*/
	text-decoration:none;
	/*font: 14px/1.5 Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;*/
}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	background:		#fff;
}
.sf-menu li li {
	background:		#efefef;
}
.sf-menu li li li {
	background:		#efefef;
}
.sf-menu li:hover, .sf-menu li.sfHover{
	background:		#efefee;
	outline:		0;
}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#02a8e2;
	outline:		0;
}

.top1 a:focus, .top1 a:hover, .top1 a:active{
	background:		#efefee;
	outline:		0;
}

voigtann1Medlem sedan juni 20019 519 inlägg

21 feb. 2012 10:35#2

Du måste nog använda dig av javascript för detta (eller vänta tills css4 kommer) för du vill påverka en förälder när dess barn har fått focus/ny klass eller missförstå jag dig?

Danne VMedlem sedan aug. 20068 090 inlägg

21 feb. 2012 10:55#3

Det är ganska enkelt om du kan fibbla med koden i varje enskild fil. Principen är denna:

<li class="a">1
	<li><a href="#">1:1</a></li>
	<li><a href="#">1:2</a></li>
</li>
<li class="b">2
	<li><a href="#">2:1</a></li>
	<li><a href="#">2:2</a></li>
</li>

I head på sidorna som tillhör grupp 1 lägger du sen in stilen du vill markera aktiv grupp med och ger den class a. I sidorna som tillhör grupp 2 kallar du samma still class b osv.

(Tänk på att inte börja ett namn på en stil med en siffra).

GimboMedlem sedan dec. 20001 626 inlägg

21 feb. 2012 11:48#4

Hej
Det är en masterpage fil som jag har, så jag kan inte ändra headfilen i varje fil.
Hur ska css filen se ut i sådana fall för att sätta en bakgrund akiv?

Personligen är jag oxå inne på javascript men får inte till det, har googlat järnet för att hitta kod som åstadkommer detta men hittar ingenting då jag inte kan javascript.

Danne VMedlem sedan aug. 20068 090 inlägg

21 feb. 2012 12:30#5

Gimbo skrev:

Hej
Det är en masterpage fil som jag har, så jag kan inte ändra headfilen i varje fil.
Hur ska css filen se ut i sådana fall för att sätta en bakgrund akiv?

Personligen är jag oxå inne på javascript men får inte till det, har googlat järnet för att hitta kod som åstadkommer detta men hittar ingenting då jag inte kan javascript.

Prova då ett fulknep: Att lägga in stilen i body. Det funkar utan problem i alla (?) webbläsare även om W3C kanske inte gillar det.

Alltså, så här ser din html ut:

<html>
<head>
</head>
<body>
<ul>
<li><a href="#" class="link1">Länk 1</a>
<ul>
<li><a href="#">1:1</a></li>
<li><a href="#">1:2</a></li>
<li><a href="#">1:3</a></li>
</ul>
</li>
<li><a href="#" class="link2">Länk 2</a>
<ul>
<li><a href="#">1:1</a></li>
<li><a href="#">1:2</a></li>
<li><a href="#">1:3</a></li>
</ul>
</li>
</ul>
</body>
</htm

I html koden på sidorna som är under "Länk 1" , antagligen direkt under <body>, lägger du in detta:

<style type="text/css">
<!--
.link1 {
background:#F00 /*eller hur du nu vill att den aktiva länken ska se ut */
}
-->
</style>

..och i sidorna som tillhör "Länk2" lägger du in detta:

<style type="text/css">
<!--
.link2 {
background:#F00 /*eller hur du nu vill att den aktiva länken ska se ut */
}
-->
</style>

följaktligen blir din kod i t.ex. sidorna som tillhör "Länk1" så här:

<html>
<head>
</head>
<body>
<style type="text/css">
<!--
.link1 {
background:#F00 /*eller hur du nu vill att den aktiva länken ska se ut */
}
-->
</style>
<ul>
<li><a href="#" class="link1">Länk 1</a>
<ul>
<li><a href="#">1:1</a></li>
<li><a href="#">1:2</a></li>
<li><a href="#">1:3</a></li>
</ul>
</li>
<li><a href="#" class="link2">Länk 2</a>
<ul>
<li><a href="#">1:1</a></li>
<li><a href="#">1:2</a></li>
<li><a href="#">1:3</a></li>
</ul>
</li>
</ul>
</body>
</html>

GimboMedlem sedan dec. 20001 626 inlägg

22 feb. 2012 08:40#6

Tack för svaret Danne, detta känns tyvärr inte optimalt då jag har en väldans massa sidor och under sidor, men om det inte finns något annat sätt att göra det på så får jag nästan köra på den lösningen. Tycker det är konstigt att det inte finns något finare sätt att göra det på då många webbplatser på nätet kör med att den aktiba menyn är markerad på något sätt.

Danne VMedlem sedan aug. 20068 090 inlägg

22 feb. 2012 09:20#7

Gimbo skrev:

Tack för svaret Danne, detta känns tyvärr inte optimalt då jag har en väldans massa sidor och under sidor, men om det inte finns något annat sätt att göra det på så får jag nästan köra på den lösningen. Tycker det är konstigt att det inte finns något finare sätt att göra det på då många webbplatser på nätet kör med att den aktiba menyn är markerad på något sätt.

Heh... jodå, det lär funka med javascript sägs det. Men det var lite svårt att gissa att du hade "en väldans massa sidor".

Här kan du ju botanisera bland förslagen:
http://www.google.com/search?client=safari&rls=en&q=javascript+active+page&ie=UTF-8&oe=UTF-8

Problemet är ju att du vill ha en annan länk att markeras än den som faktiskt gäller för den aktiva sidan....men om du gräver kanske du hittar nån lösning.

Återkom och berätta.

voigtann1Medlem sedan juni 20019 519 inlägg

22 feb. 2012 09:30#8

Om du kör exempelvis jquery så kan du leta upp alla a-element i menyn och kolla på den aktuella urlen om den är densamma sätt en css klass 'active' eller något: http://utvecklaren.grubblar.nu/index.asp?visa=1930

GimboMedlem sedan dec. 20001 626 inlägg

22 feb. 2012 10:16#9

Det är nog jquery varianten jag bör använda då min meny är en superfish gjord i jquery. Så här ser det ut hos mig nu, i head taggen:

<script type="text/javascript">
 		// initialise plugins
		jQuery(function(){
			jQuery('ul.sf-menu').superfish();
		});
		</script>		
			
			[b]<script type="text/javascript">
		 $(document).ready(function(){ 
				$("ul.sf-menu").StyleCurrentMenu("selected","/pages/default.aspx");
			});			</script>	[/b]

Där det fetmarkerade är Grubblans variant på hur man ska köra en aktiv meny.

Och nedan är dess jquery kod

(function($) {    
$.fn.StyleCurrentMenu = function(className,startPage) {
        var aAdress = location.href.split("/");
        var sPage = aAdress[aAdress.length - 1];
        if(sPage.length == 0) {sPage = startPage}
        $("#" + this.attr("id") + " a").each(function(){
            if($(this).attr("href") == sPage) {
                return $(this).addClass(className);
            }
        });    
}})(jQuery);

Men får det inte att lira hos mig:

Html koden ser ut så här, tar inte med all html kod men så ni vet hur det ser ut:

			<ul class="sf-menu">
			<li class="current">
				<div class="top1"><a href="/pages/default.aspx">Home</a></div>
				
			</li>
			<li class="currentPP">
				<div class="top1"><a href="#">Meny1</a></div>
			</li>
			<li class="currentDef">
				<div class="top1"><a href="#">Meny2</a></div>
				<ul>
					<li class="top2">
						<a href="#">menu item</a>
						<ul>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>
							<li><a href="#">short</a></li>

Ska jag ta bort li klasserna är de som ställer till det?

GimboMedlem sedan dec. 20001 626 inlägg

22 feb. 2012 13:39#10

Verkar som att den inte sätter classnamnet, vill att den sätter class namnet på li elementet och mina urler ser ut som sådana:
/meny1/pages/default.aspx
/meny2/pages/default.aspx

så jag ändrade lite i jquery satte det till -3 istället för -1 se nedan och då får jag ut: meny1 och meny2

(function($) {
    $.fn.StyleCurrentMenu = function(className,startPage) {
        var aAdress = location.href.split("/");
        var sPage = aAdress[aAdress.length - [b]3[/b]];
        if(sPage.length == 0) {sPage = startPage}
        $("#" + this.attr("id") + " a").each(function(){
            if($(this).attr("href") == sPage) {
                return $(this).addClass(className);
            }
        });
    }})(jQuery);

Men får det fortfarande inte att fungera, har testat allt möjligt...

GimboMedlem sedan dec. 20001 626 inlägg

24 feb. 2012 13:14#11

För den som vill veta hur man gör detta så löste jag ovan med detta:

(function($) {
    $.fn.StyleCurrentMenu = function(className) {
    	var pageUrl = location.href;
    	$('a[href="' +pageUrl+ '"]', $(this)).closest('li.top').addClass(className);
    	
    }})(jQuery);

och sedan samma kod i headtaggarna, den den gör nu är att den går upp till den li tag som är längst upp och som har classen top och style'ar den