Difference between revisions of "Template:Freiburg/MenubarTest"

Line 516: Line 516:
 
}
 
}
  
−
@media screen and (max-width: 600px) {
+
@media only screen and (max-width: 600px) {
  
 
     nav {  
 
     nav {  
Line 540: Line 540:
 
         text-indent: 25px;
 
         text-indent: 25px;
 
     }
 
     }
−
} /* end of inner media query dont delete */
+
} /* end of media query dont delete */
 +
 
 +
 
 +
@media only screen and (max-width : 480px) {
 +
    nav {
 +
        border-bottom: 0;
 +
    }
 +
    nav ul {
 +
        display: none;
 +
        height: auto;
 +
    }
 +
    nav a#pull {
 +
        display: block;
 +
        background-color: #283744;
 +
        width: 100%;
 +
        position: relative;
 +
    }
 +
    nav a#pull:after {
 +
        content:"";
 +
        background: url('nav-icon.png') no-repeat;
 +
        width: 30px;
 +
        height: 30px;
 +
        display: inline-block;
 +
        position: absolute;
 +
        right: 15px;
 +
        top: 10px;
 +
    }
 +
} /* end of media query dont delete */
 +
 
 +
@media only screen and (max-width : 320px) {
 +
    nav li {
 +
        display: block;
 +
        float: none;
 +
        width: 100%;
 +
    }
 +
    nav li a {
 +
        border-bottom: 1px solid #576979;
 +
    }
 +
}
  
 
</style>
 
</style>
 +
 +
<script type="text/javascript">
 +
// script for smallnav
 +
$(function() {
 +
    var pull        = $('#pull');
 +
        menu        = $('nav ul');
 +
        menuHeight  = menu.height();
 +
 +
    $(pull).on('click', function(e) {
 +
        e.preventDefault();
 +
        menu.slideToggle();
 +
    });
 +
});
 +
 +
$(window).resize(function(){
 +
    var w = $(window).width();
 +
    if(w > 320 && menu.is(':hidden')) {
 +
        menu.removeAttr('style');
 +
    }
 +
});
 +
 +
</script>
 +
 +
 +
 +
  
 
<!-- BEGIN: jQuery -->
 
<!-- BEGIN: jQuery -->

Revision as of 10:04, 16 September 2015

""