Hello, menu!

This is a simple bootstrap 4 horizontal menu using collapse.

Responsive, min-height 100%, footer sticky if less than 100% height

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
html{ height:100%; overflow-y:scroll; } body{ min-height:100%; width:100%; display:table; > .table-row{ display:table-row; width:100%; } > #content{ height:100%; background:#eceeef; } } nav#main-nav{ padding:0; text-align:center; overflow:hidden; } #collapsing-navbar{ position:relative; text-align:center; width:100%; background:#333; overflow:hidden; > ul{ display:inline-block; text-align:center; margin:0 auto; vertical-align:top; > li{ float:none; display:inline-block; padding:0; margin:0; > a{ padding:20px; color:#ccc; &[aria-expanded=true]{ position:relative; &:after{ width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #111 transparent; position:absolute; right:0; left:0; margin:0 auto; bottom:0; content:''; } } } .subnav-container{ background:#111; position:absolute; left:0; width:100%; text-align:center; ul{ display:inline-block; margin:0 auto; width:auto; text-align:center; li{ float:none; display:inline-block; a{ color:#ccc; padding:10px; position:relative; z-index:9999; } } } } } } } #spaceman{ background:#111; width:100%; } .jumbotron{ margin-bottom:0; } footer{ background:#333; > div{ padding-top:15px; } } .collapsing-no-animation { -webkit-transition: none !important; transition: none !important; transition: height 0.01s; } var $spacemanInner = $('#spaceman #spaceman-inner'); var expandedSubNavsSelector = ".subnav-container.collapse.in"; var collapsingSubNavsSelector = ".subnav-container.collapsing"; $(document).ready(function() { $('.subnav-container').on('show.bs.collapse', function(event) { $clicked = $(document).find("[href='#" + $(event.target).attr('id') + "']") /* dont allow mulitple items to collapse at the same time */ if ($(collapsingSubNavsSelector).length > 0) { event.preventDefault(); return false; } $spacemanInner.css("height", $(this).height() + "px"); /* if a item is alredy expanded */ if ($(expandedSubNavsSelector).length > 0) { $spacemanInner.addClass("collapsing"); //this).addClass(collaspseNoAnimationClass); event.preventDefault(); $(this).addClass('in'); $clicked.attr("aria-expanded","true"); } else { /* show spaceman */ $('#spaceman').collapse('show'); } /* hide other visible items */ $(expandedSubNavsSelector).not(this).removeClass('in'); $(".nav-link").not($clicked).attr("aria-expanded","false"); }); $('.subnav-container').on('hidden.bs.collapse', function() { //$(this).removeClass(collaspseNoAnimationClass); $(this).css("height", "auto"); }); $('.subnav-container').on('hide.bs.collapse', function() { /* length will be 2 if item is hidden to show another */ if ($("." + collaspseNoAnimationClass).length == 0) { /* collapse spaceman */ $('#spaceman').collapse('hide'); } }) $(window).on('resize', function() { SetSpacemanHeight(); }); $("#collapseFooterText").on("shown.bs.collapse", function() { $("html, body").animate({ scrollTop: $(document).height() }, "fast"); }); $("#bigger-text").on("click", function() { var fontSize = parseInt($("#collapseExample").css("font-size")); fontSize = fontSize + 1 + "px"; $("#collapseExample").css({ 'font-size': fontSize }); }); $("#smaller-text").on("click", function() { var fontSize = parseInt($("#collapseExample").css("font-size")); fontSize = fontSize - 1 + "px"; $("#collapseExample").css({ 'font-size': fontSize }); }); }); function SetSpacemanHeight() { /* if a item is expanded */ if ($(expandedSubNavsSelector).length > 0) { $("#spaceman").collapse("show"); /* if height has changed */ if ($spacemanInner.height() != $(expandedSubNavsSelector).eq(0).height()) { $spacemanInner.addClass("collapsing"); $spacemanInner.css("height", $(expandedSubNavsSelector).eq(0).height() + "px"); } } }
Wir feiern 46 Jahre SHIRIN – seit 1979 für Sie da.
460 CHF Jubiläumsgeschenk sichern

Beispieltext