submenu maken

[rob1970]

Hier staat een website die ik heb gemaakt met behulp van een kant en klare template.
https://met-rob.com/cleverbuyparts/

Het menu is als volgt opgebouwd:

<nav id="nav">
						  <ul>
								<li class="special">
									<a href="#menu" class="menuToggle"><span>Menu</span></a>
									<div id="menu">
										<ul>
											<li><a href="index.html">Home</a></li>
											<li><a href="overons.html">Over ons</a></li>
											<li><a href="voorraad.html">Voorraad</a></li>
											<li><a href="contact.html">Contact</a></li>
										</ul>
									</div>
								</li>
							</ul>
						</nav>

Als ik bijvoorbeeld onder het menupunt "voorraad" een submenu wil hebben zoals bijvoorbeeld op deze website: https://www.beautysalon-vanaerde.nl/
Dus net zoals onder het menupunt "behandelingen" een "plusteken" met daaronder 4 submenupunten.
Maar dan onder mijn menupunt "voorraad"

Hoe krijg ik dat voor elkaar?

 

[Aar]

Op zo'n moment is Google erg handig, en je leert ervan....

https://www.w3schools.com/howto/howto_css_subnav.asp

Kan je hier wat mee?
Feit dat het menu in jouw situatie gestapeld is, maakt niet gek veel uit.
Dus probeer eens wat? En deel het gerust in een JSfiddle als je vragen hebt.

 

[bron]

Kan je hiermee verder? Zet het script onder </nav> of helemaal onderaan vlak boven </body>

De html

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="overons.html">Over ons</a></li>
    <li class="submenu">
        <a href="#" class="submenuToggle">Voorraad <i class="sign"></i></a>
        <ul>
            <li><a href="item1.html">Sub item 1</a></li>
            <li><a href="item2.html">Sub item 2</a></li>
            <li><a href="item3.html">Sub item 3</a></li>
        </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

<script>
var subTogglers = document.querySelectorAll(".submenu .submenuToggle");
for (var i=0; i < subTogglers.length; i++) {
    subTogglers[i].addEventListener("click", function(event) {
        event.preventDefault();
        this.classList.toggle("submenuActive");
    });
}
</script>

De css

/* opmaak submenu */
li.submenu ul {
    margin: 0.5em 0 0 0 !important;
    padding: 0.5em 0 0 0 !important;
    border-top: solid 1px rgba(255, 255, 255);
}
/* open/close */
.submenuToggle + ul {
    display: none;
}
.submenuToggle.submenuActive + ul {
    display: block;
}
/* submenu sign */
.submenuToggle {
    position: relative;
}
.submenuToggle .sign {
    position: absolute;
    right: 0;
}
.submenuToggle .sign:before {
    content: "+";
    font-size: 1.5em;
}
.submenuToggle.submenuActive .sign:before {
    content: "-";
    font-size: 2em;
}

 

[rob1970]

Perfect

Precies zoals de bedoeling was.

Hartstikke bedankt!!!!

 

[bron]

Als je 2 (of meer) submenu's hebt: Je kan een geopend submenu automatisch laten sluiten als je een ander submenu opent. Het is slechts één regel extra.

var subTogglers = document.querySelectorAll(".submenu .submenuToggle");
for (var i=0; i < subTogglers.length; i++) {
    subTogglers[i].addEventListener("click", function(event) {
        event.preventDefault();
        for (var j=0; j < subTogglers.length; j++) subTogglers[j].classList.remove("submenuActive");
        this.classList.toggle("submenuActive");
    });
}

 

[rob1970]

Tx

 

[bron]

Oops, bugje eruit gehaald. Werkt nu goed.

var subTogglers = document.querySelectorAll(".submenu .submenuToggle");
for (var i=0; i < subTogglers.length; i++) {
    subTogglers[i].addEventListener("click", function(event) {
        event.preventDefault();
        for (var j=0; j < subTogglers.length; j++) {
            if (this == subTogglers[j]) this.classList.toggle("submenuActive");
            else subTogglers[j].classList.remove("submenuActive");
        }
    });
}

 

[rob1970]

Tx again

 

[rob1970]

Het werkt niet helemaal

Ik heb dit menu toegepast en de betreffende website staat nu hier: https://met-rob.com/glowskins/

Het heeft even geduurd voordat ik ermee verder kon gaan.

Maar ik heb de website nu bijna af op enkele teksten na.

En nu kwam ik erachter dat het submenu alleen werkt vanaf de indexpagina.

Daar klapt het submenu prima uit als ik op "behandelingen" of het "plusje" klik.

Maar vanuit elke andere pagina van de website doet het submenu niets en kan ik er niet bij komen.

 

[Aar]

Als ik heel simpel beide broncodes vergelijk (https://www.diffchecker.com/ is een tof tooltje), dan kan je zien dat het script mist.

 

[rob1970]

tx

dat was het ja. Soms ligt de oplossing zó dichtbij dat je (ik) er overheen kijkt.

bedankt, het werkt prima nu