Avatar billede Morten Professor
01. februar 2018 - 14:57 Der er 17 kommentarer

Vis aktiv toggle efter refresh

Hej Eksperter

Jeg er kommet til en mur, kan ikke finde ud af at lave sådan, at når man feks. trykker på en menu, hvor den så loader den side, og så stadig viser den togglede menu under, så man under den menu har flere muligheder derfra.
Er det muligt har set rundt på nettet, at man kan gennem den i en cookis men kan ikke få det til at virke.

Med venlig hilsen
Morten
Avatar billede Slater Ekspert
01. februar 2018 - 15:21 #1
Det mest smarte ville nok være at bruge AJAX til at loade indholdet, så siden slet ikke opdaterede og menuen derfor ikke lukkede med mindre man bad den om det.

Skal det gøres på denne måde, så drop cookies - de er dybt forældede til det - og brug localStorage i stedet.

Når en menu åbnes, kan du samtidig sætte id'et på den menu i localstorage med f.eks. localStorage.setItem('openMenuId', menuId);
Når menuen lukkes manuelt, uden en anden åbnes, sletter du det med localStorage.removeItem('openMenuId');
Og hver gang en side åbnes, tjekker du så om der er en åben menu med localStorage.getItem('openMenuId') - og hvis der er det, åbner du menuen med det id med det samme.
Avatar billede Morten Professor
01. februar 2018 - 17:06 #2
Det er rigtig smart :o)

Men har du et eksempel på det så eg har noget at gå efter.
Er ikke lige den helt skrappe til det :o)
Avatar billede Slater Ekspert
01. februar 2018 - 17:30 #3
Kan du fortælle eller vise hvordan dine menuer er lavet? Så er det nemmere at lave et eksempel der kan bruges.
Avatar billede Morten Professor
01. februar 2018 - 18:47 #4
Jeg har ikke lige det store overblik over det lige nu men kan du se det igennem googles hjælpeværtøj i chrome.
Link til siden: http://testmenu.ankerstjerneweb.dk/wordpress/
Avatar billede Morten Professor
02. februar 2018 - 09:24 #5
Hej Slater

Jeg fandt lidt om det men kan ikke rigtig kommer frem til en sammenhæng med at toggle min menu.

function storeItem() {
            var item = $('#item').val();
            localStorage.setItem('myItem', item);
            sessionStorage.setItem('myItem', item);

            refresh();
        }

        function refresh() {
            $('#localItem').text(localStorage.getItem('myItem'));
            $('#sessionItem').text(sessionStorage.getItem('myItem'));
        }

        $(function () { refresh(); });
Avatar billede Morten Professor
02. februar 2018 - 15:24 #6
Er kommet frem til hvordan det hænger sammen med toggle:

.main-navigation li ul.focus>ul,.main-navigation ul li:hover>ul,.secondary-navigation ul li.focus>ul,.secondary-navigation ul li:hover>ul{
  left:0;
  display: block;
  float: left;
  display: none;
}
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a, .site-header ul.menu li.current-menu-item > a {
    color: #838383;
    background-color: #FFF;
}
.main-navigation ul.show{
  left:0;
  display: block;
  float: left;
}

var toggle_over =
{
    ready:function()
    {
        $('.main-navigation li ul').click(function(){
            $(this).find('.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul,.secondary-navigation ul li.focus>ul,.secondary-navigation ul li:hover>ul').toggleClass('show');
        }
    )}
}
$(document).ready(toggle_over.ready);

Men nu kommer jeg så der til hvor når jeg trykker refresher den og jeg mister min aktive toggle.
Avatar billede Slater Ekspert
02. februar 2018 - 16:25 #7
Jeg har ikke lige haft tid før nu, sorry. Men jeg beklager hvis det er mig der bare er langsom, men jeg er stadig ikke helt sikker på, jeg forstår hvad du gerne vil opnå, nu hvor jeg ser siden.
Er det den menu med "Velkommen" og "Shop", du vil have til at blive fremme ved sideskift? Det gør i så fald tingene lidt anderledes at den aktiverer ved mouseover og ikke klik. Ikke fordi det ikke kan lade sig gøre, men fordi det vil være underligt UI-design at den ikke lukker af sig selv.
- Eller er det noget andet?
Avatar billede Morten Professor
02. februar 2018 - 16:28 #8
Hej

Jeg oprettede lige et spørgsmål lige for et sek siden :D
Avatar billede Morten Professor
02. februar 2018 - 16:32 #9
Men jo det jeg forsøger på er at når jeg så toggler menuen og jeg sammentidig skal ind på den side, men hvor dens undersider også kommer frem undermenuen
Håber det giver mening

Der er en side som asos.com den er jeg ret sikker på er custom kodet.
Der kan man se at når man går inde under "MEN" kommer der en undermenu op som er fremme heletiden.
Det er lidt det jeg forsøger at komme frem til :o)

Håber det giver det bedre billede.
Avatar billede Slater Ekspert
02. februar 2018 - 16:40 #10
Ah, på dén måde. Jamen det tror jeg sådan set slet ikke er lavet som en folde-ud-menu på den måde. Det er sandsynligvis bare lavet i server-side, sådan at hvis man er på siden /men/ eller en underside, så inkluderer den en ekstra div med menuen i fra serverens side. Den menu eksisterer jo først efter siden er skiftet.

Det kan du gøre i dine Wordpress templates i PHP-kode, men det kan også lade sig gøre i Javascript og CSS.

F.eks. kan du lave menuen så den er der fast, skjule den med display: none; i CSS, og så i Javascript f.eks. skrive

if (location.href.indexOf('/shop/')) {
    $('#din-menus-id').show();
}
Avatar billede Slater Ekspert
02. februar 2018 - 16:42 #11
Rettelse, det bør være
if (location.href.indexOf('/shop/') >= 0)

Jeg glemte lige et øjeblik at ikke-fundet returnerer -1, som evaluerer til true.
Avatar billede Morten Professor
02. februar 2018 - 16:50 #12
Jeg har en side som jeg er ved at lave, der har jeg 2 menuer en der hedder dreng og pige, hvordan styre jeg det, så den ikke viser fra dem begge på en gang.
Avatar billede Slater Ekspert
02. februar 2018 - 16:56 #13
Står der f.eks. domæne.dk/shop/dreng/ når du er inde på dreng og ligeledes /pige/ på pigesiden? Så kan du bruge ovenstående, bare hvor du skifter "/shop/" ud med "/dreng/" osv.

Et eksempel:

<div id="menu-dreng">Menu for drenge</div>
<div id="menu-pige">Menu for piger</div>

<script>
if (location.href.indexOf('/dreng/') >= 0) {
    $('#menu-dreng').show();
}
else if (location.href.indexOf('/pige/') >= 0) {
    $('#menu-pige').show();
}
</script>

Jeg vil dog stadig sige det er bedre at gøre det i PHP, mest af hensyn til søgemaskiner, men det betyder ikke så meget.
Avatar billede Morten Professor
02. februar 2018 - 17:01 #14
Jeg er lige ved at prøve det af på den der test side :o)
Avatar billede Morten Professor
02. februar 2018 - 17:30 #15
Har lige prøvet men syntes ikke den bliver fremme, ved ikke lige helt hvad jeg gør galt jeg brugte
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children current-menu-item current_page_item menu-item-56">

if (location.href.indexOf('/shop/') >= 0) {
    $('#menu-item-56').show();
}

Kan du se hvad jeg skal bruge?
Avatar billede Morten Professor
02. februar 2018 - 23:07 #16
Så er jeg kommet frem til noget der virker nogenlunde.
$(document).ready(function () {
if (location.href.indexOf('/drenge/') >= 0) {
    $('.main-navigation ul ul,.secondary-navigation ul ul').show();
}
else if (location.href.indexOf('/pige/') >= 0) {
    $('.main-navigation ul ul,.secondary-navigation ul ul').show();
}
});
Men der dukker begge undermenuer op både under drenge og pige
Er der en måde hvor jeg kan gøre det mere opdelt?
Avatar billede Morten Professor
02. februar 2018 - 23:24 #17
Det virker fint men ikke optimalt for når jeg så vil have flere undermenuer bliver alle vist.

Er det slet ikke muligt at toggle det og så stadig gemme toggle efter refresh.
Håber det er muligt, ellers må jeg sige, det ikke kan lade sig gøre som de gerne vil have det. :o/
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester