Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:menu:bootstrap

Bootstrap

letzten gewählten Menüpunkt aktiv anzeigen
aktiven Menüpunkt anders farbig anzeigen

https://www.codeply.com/go/I3EjDb74My

HTML
<div>
	<hr>
		<nav class="container-fluid navbar navbar-expand-sm bg-dark navbar-dark" style="padding-left: 75px; margin-top: -16px;">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link active" style="padding-left: 0px;" href="#">Most Popular</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">News</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Sports</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Science</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Politics</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Economics</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Random</a> 
				</li>
				<li class="nav-item">
					<a class="nav-link " style="padding-left: 480px; color: white; " href="#">Log in</a>
				</li>
			</ul>
		</nav>
	</div>
JS
$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})
CSS
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
    background-color: red;
}

Einfaches Tree Menü

mit jquery.js

http://jsfiddle.net/Conny64/jy0zpwud/1/
ezucojrmsr.jpg

<ul id="MainMenu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li>
              <a href="#">News</a>
              <ul class="noJS">
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
                <li><a href="#">sub menu 3</a></li>
                <li><a href="#">sub menu 4</a></li>
                <li><a href="#">sub menu 5</a></li>
                <li><a href="#">sub menu 6</a></li>
            </ul>                         
        </li>
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Admin</a></li>
        <li><a href="#">Resources</a>
            <ul class="noJS">
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
                <li><a href="#">sub menu 3</a></li>
                <li><a href="#">sub menu 4</a></li>
                <li><a href="#">sub menu 5</a></li>
                <li><a href="#">sub menu 6</a></li>
            </ul>
        </li>
        <li class="lastChild"><a href="#">New Button</a></li>
    </ul>
$(function() {
    $('#MainMenu > li').click(function(e) {
        e.stopPropagation();
        var $el = $('ul',this);
        $('#MainMenu > li > ul').not($el).slideUp();
        $el.stop(true, true).slideToggle(10);
    });
        $('#MainMenu > li > ul > li').click(function(e) {
        e.stopImmediatePropagation();  
    });
});
ul >li {
  margin-left: 20px;
}
Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:menu (50 views) · Zuletzt geändert: 28/12/2020 10:38 von conny