webForumDet fria alternativet

class active med undermenyer..

16 svar · 1 286 visningar · startad av Renegade8164

Renegade8164Medlem sedan sep. 201057 inlägg
#1

Hej, jag håller på med ett blogg-system och har fastnat i class="active" på mina menyer samt undermenyer. Javascript/CSS/HTML funkar som det ska, men jag måste kunna skriva ut class="active" beroende på vilken sida jag är inne på och inte manuellt.

Jag använder mig utav en drop-down meny, så jag behöver class="active" på <li>-taggen också, vilket har skapat mig stora problem som jag inte vet hur ja ska gå till väga. (Jag har funderat på PHP-lösningar, men vill hålla min html-kod (template) så ren som möjligt.)

Här är den koden jag använder mig utav;

admin_head.tpl

...
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
    $(document).ready(function () {
        InitMenuEffects ();
    });
    function InitMenuEffects () {
        /* Sliding submenus */
        $('.sidebar .menu ul ul').hide();
        $('.sidebar .menu ul li.active ul').show();
        
        $('.sidebar .menu ul li').click(function () {
            submenu = $(this).find('ul');
            if (submenu.is(':visible'))
                submenu.slideUp(150);					
            else
                submenu.slideDown(200);									
            return false;
        });
    }
    </script>
</head>
....

admin_sidebar.tpl (med class="active" inskrivet manuellt)

...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li>
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">{lang_administration}</a>
                <ul>
                    <li class="active"><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...
voigtann1Medlem sedan juni 20018 810 inlägg
#2

hur ser den genererade HTML koden ut? för det är inget fel på din html kod.

det du saknar kan jag tänka mig att du vill plocka bort active på:

$('.sidebar .menu ul li').click(function () {

Antingen sparar du undan $('.sidebar .menu ul li'), som en variabel innan click-eventet och removeClass("active") på kollektionen och sedan ta $(this).addClass("active").

Renegade8164Medlem sedan sep. 201057 inlägg
#3

Den HTML-koden är exakt som den jag skrev men utan class="active" på de två <li>-taggarna.

Jag försökte på så som du sa, men gick inget vidare för mig. Antingen markerades hela menyer eller så markerades bara när jag klickade på <li>.

Kan vart så att jag skrev koden helt fel, då jag e inte så smart på js.

voigtann1Medlem sedan juni 20018 810 inlägg
#4

vänta nu.. är det när du trycker på exempelvis stats så skall den + noderna upp få klassen active?

Renegade8164Medlem sedan sep. 201057 inlägg
#5

För att beskriva det mer grafiskt tog jag printscreens på menyn. hm..

1. När sidan Overview (admin.php) är laddad ska det se ut så här när class="active" på båda <li>;

2. Jag kan tycka på meny-namnet (Administration) och då åker den upp och ser nu ut såhär;

3. Sen när jag vill se en annan eller flera menyer kan jag göra det (<li> utan class="active").

voigtann1Medlem sedan juni 20018 810 inlägg
#6

vad jag kan se ( http://jsbin.com/alira3/ ) så gör den ju redan det du vill att den skall göra. eller du vill att {username} också skall bli vit markerad(vit markerad bara om den är expanderad?

Renegade8164Medlem sedan sep. 201057 inlägg
#7

Ja JS animerar rätt o så. Men jag har ju fortfarande problem med att få class="active" på rätta länkar

voigtann1Medlem sedan juni 20018 810 inlägg
#8

på bild 2, när den är "inne" skall den plocka bort "active" klassen? förlåt, men jag måste vara trög, för jag kopplar inte bilderna mot vad din kod inte gör.

Renegade8164Medlem sedan sep. 201057 inlägg
#9

På bild 2 fälls menyn ihop, men är fortfarande active

voigtann1Medlem sedan juni 20018 810 inlägg
#10

Renegade8164 skrev:

På bild 2 fälls menyn ihop, men är fortfarande active

Det skall den inte vara då?

kolla på clicket och kör:

if($(this).hasClass("active")) { $(this).removeClass("active") }

eller: http://jsbin.com/alira3/3/

Renegade8164Medlem sedan sep. 201057 inlägg
#11

Det löste inte mitt problem, det var lite fel. Jag vill att Javascript fattar att när jag går till ex; "minblogg.se/admin/profile.php". Så ska den list-item (<li><a href="profile.php"></a></li>) som innehåller länk till "profile.php" sättas class="active" på <li>-taggen, samt sätta class="active" på <li>-taggen på övermenyn.

Om jag går till profile.php ska koden bli såhär:

...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li class="active">
                <a href="#">{username}</a>
                <ul>
                    <li class="active"><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li>
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...

om jag går till account.php ska koden bli såhär:

...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li class="active">
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li class="active"><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li>
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...

Om jag går till stats.php ska koden bli såhär:

...
<div class="sidebar">
    <div class="menu">
        <ul>
            <li>
                <a href="#">{username}</a>
                <ul>
                    <li><a href="profile.php">{lang_manage_profile}</a></li>
                    <li><a href="account.php">{lang_manage_account}</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#">{lang_administration}</a>
                <ul>
                    <li><a href="admin.php">{lang_overview}</a></li>
                    <li class="active"><a href="stats.php">{lang_stats}</a></li>
                    <li><a href="notes.php">{lang_notes}</a></li>
                </ul>				
            </li>
        </ul>
    </div>
</div>
...

...

voigtann1Medlem sedan juni 20018 810 inlägg
#12

kolla bara vad din location.href är just nu och se om du kan matchar den med $("a[href='"+location.href+"']")

Renegade8164Medlem sedan sep. 201057 inlägg
#13

okej... hur gör jag det?

voigtann1Medlem sedan juni 20018 810 inlägg
#14
function findLink() {
	$(".menu a").each(function() {
		if (this.href===location.href) {
			$(this).parents("li").addClass("active");
		}
	});
}

Och kör funktionen innan du kör din InitMenuEffects()

exempel: http://voigt.se/sandbox/wf/menu/index.html

Renegade8164Medlem sedan sep. 201057 inlägg
#15

Tack :D

Renegade8164Medlem sedan sep. 201057 inlägg
#16

Men nu fick jag ett nytt problem...
När jag trycker på länkarna refereras jag inte. Ex; om jag klickar på "Manage Profile", som länkar till profile.php så händer det inget. Hm.

voigtann1Medlem sedan juni 20018 810 inlägg
#17

det är ju din kod som gör det, du kör return false på alla dina a-element:

function InitMenuEffects () {
        /* Sliding submenus */
        $('.sidebar .menu ul ul').hide();
        $('.sidebar .menu ul li.active ul').show();
        
        $('.sidebar .menu ul li>a').click(function () {
            submenu = $(this).find('ul');
            if (submenu.is(':visible'))
                submenu.slideUp(150);					
            else
                submenu.slideDown(200);									
            return false;
        });
    }

eller bara plocka bort return false; eftersom dina andra länkar är "#"

Genererad på 380 ms · cache AV · v20260730165559-full.f96bc7eb