HennWeb

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
==== Bootstrap ====


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

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

{{programmieren:menu:ezltqeruv8.png}}

<code javascript| 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>
</code>

<code javascript| JS>$('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
})
</code>

<code css| CSS>
.navbar-dark .nav-item > .nav-link.active  {
    color:white;
    background-color: red;
}
</code>
----
==== Einfaches Tree Menü ====
mit jquery.js

http://jsfiddle.net/Conny64/jy0zpwud/1/ \\
{{ programmieren:menu:ezucojrmsr.jpg ?200 }}
<code html>
<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>
</code>

<code java>
$(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();  
    });
});
</code>

<code css>
ul >li {
  margin-left: 20px;
}
</code>