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;
}
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
programmieren:menu (116 views) · Zuletzt geändert: 28/12/2020 10:38 von conny