Dynamische navigatielinks

Ik ben bezig met een project waarbij ik een horizontale navigatiebalk heb met 6 koppelingen waarvan er 3 deel uitmaken van een subnavigatie in dezelfde horizontale balk. De koppelingen worden weergegeven met pictogrammen. Ik ben op zoek naar de gemakkelijkste manier om de subnavigatie dynamisch te wijzigen wanneer ik op een van de belangrijkste navigatiepictogrammen klik.

[ Home - Search ]{ home1 - home2 - home3 }[ Add ]

wanneer zoeken is geselecteerd, verandert het in:

[ Home - Search ]{ search1 - search2 - search3 }[ Add ]

Dit is momenteel de HTML voor de balk. De koppelingen voor de vervangende pictogrammen zijn niet gemaakt omdat deze momenteel de structuur doorbreken.



Om het even welke hulp op dit zou zeer gewaardeerd worden

0
Bedankt voor deze opmerkingen, ik heb deze wijzigingen aangebracht.
toegevoegd de auteur anater, de bron
Uw opmaak is niet geldig. De div s moeten zich buiten de ul s bevinden.
toegevoegd de auteur Jared Farrish, de bron
Ook geen van de a sluittags is correct. moet zijn.
toegevoegd de auteur Jared Farrish, de bron

2 antwoord

Ik weet niet dat je er echt slim mee moet worden. Zet ze gewoon samen en schakel een .hidden -klasse in:

CSS

.hidden {
    display: none;
}

HTML


jQuery

$(document).ready(function(){
    var $subnavs = $('#subNav, #searchNav'),
        $search = $('#mainNav .searchLink');

    $search.click(function(){
        $subnavs.toggleClass('hidden');

        return false;
    });
});

http://jsfiddle.net/userdude/eJm2z/1

Merk op dat die afschuwelijk lelijke menustijl alleen bedoeld is voor demonstratie ...

0
toegevoegd
Bedankt voor de demonstratie, het was heel nuttig, ik kan er misschien een variatie van gebruiken. Het doel is echt om toegang te krijgen tot de subnav van het zoeken vanaf elke locatie op de site zonder de pagina opnieuw te laden. Hoe zou ik het zo maken dat het geen "toggle" is? Als u bijvoorbeeld de homeLink raakt, wordt de thuis-subnav weergegeven in plaats van de zoeksubnav in en uit te schakelen door searchLink te selecteren.
toegevoegd de auteur anater, de bron
Ik bedoel, als ik Thuis selecteer, zal het de home-subnav-items tonen en als ik Zoeken selecteer, zal het zoek-subnav-items tonen. Allemaal zonder naar een nieuwe pagina te gaan.
toegevoegd de auteur anater, de bron
Dit is perfect, heel erg bedankt.
toegevoegd de auteur anater, de bron
Ik probeer het echter te implementeren en het werkt gewoon niet. Ik weet niet zeker waarom.
toegevoegd de auteur anater, de bron
Heb je het over een speciale knop voor het openen van een subnav-opening en een speciaal submenu voor het openen van subnav-startpagina's op het hoogste niveau? Dus als u meer dan eens op Zoeken klikt, opent u alleen de subnav Zoeken en verbergt u de Startpagina en omgekeerd? Of verbergt u de navijkerknop Zoeken in de show en toont u wanneer zijn subnav verborgen is?
toegevoegd de auteur Jared Farrish, de bron
Ik vermoed dat je iets bedoelt met de regels van jsfiddle.net/eJm2z/2 .
toegevoegd de auteur Jared Farrish, de bron
Zonder te zien wat je hebt dat niet werkt, weet ik niet wat ik moet zeggen.
toegevoegd de auteur Jared Farrish, de bron

Deze code wijzigt elke koppeling met een nieuwe klasse en nieuwe tekst op basis van de titels die zijn doorgegeven aan responder :

var responder = function(components) {
    return function() {
        $.each($("#subNav a"), function(index, element) {
            $(element).text(components[index]);
            $(element).attr("class", components[index]+"Link");
        });
    }
};
$(".homeLink").click(responder(["home1", "home2", "home3"]))
$(".searchLink").click(responder(["search1", "search2", "search3"]))

Het toevoegen van meer opties zou net zo eenvoudig zijn als het koppelen van responder ([titels ...]) aan een klik gebeurtenis;

0
toegevoegd