Difference between revisions of "Template:Freiburg/MenubarTest"
| Line 4: | Line 4: | ||
<title>""</title> | <title>""</title> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | |||
<style> | <style> | ||
/* ============= BEGIN: Stylesheet for navigation menu ============= */ | /* ============= BEGIN: Stylesheet for navigation menu ============= */ | ||
| Line 157: | Line 156: | ||
/* ==== End classes for icons ==== */ | /* ==== End classes for icons ==== */ | ||
| + | @media screen and (min-width: 850px){ | ||
/* ==== Begin running chip ==== */ | /* ==== Begin running chip ==== */ | ||
| Line 436: | Line 436: | ||
/* ==== End Settings Submenu Level 2 ==== */ | /* ==== End Settings Submenu Level 2 ==== */ | ||
| + | #smallnav{ | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | } /* end media query*/ | ||
| + | |||
| + | @media screen and (max-width: 849px){ | ||
| + | |||
| + | #header{ | ||
| + | top: -9000px; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | |||
| + | #smallnav { | ||
| + | height: 40px; | ||
| + | width: 100%; | ||
| + | background: #455868; | ||
| + | font-size: 11pt; | ||
| + | font-weight: bold; | ||
| + | position: relative; | ||
| + | border-bottom: 2px solid #283744; | ||
| + | } | ||
| + | |||
| + | #smallnav ul { | ||
| + | padding: 0; | ||
| + | margin: 0 auto; | ||
| + | width: 600px; | ||
| + | height: 40px; | ||
| + | } | ||
| + | |||
| + | /* display list elements on the left */ | ||
| + | #smallnav li { | ||
| + | display: inline; | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | /* 6 elements in 600 px make 100px per element */ | ||
| + | #smallnav a { | ||
| + | color: #fff; | ||
| + | display: inline-block; | ||
| + | width: 100px; | ||
| + | text-align: center; | ||
| + | text-decoration: none; | ||
| + | line-height: 40px; | ||
| + | text-shadow: 1px 1px 0px #283744; | ||
| + | } | ||
| + | |||
| + | #smallnav li a { | ||
| + | border-right: 1px solid #576979; | ||
| + | box-sizing:border-box; | ||
| + | -moz-box-sizing:border-box; | ||
| + | -webkit-box-sizing:border-box; | ||
| + | } | ||
| + | #smallnav li:last-child a { | ||
| + | border-right: 0; | ||
| + | |||
| + | #smallnav a:hover, #smallnav a:active { | ||
| + | background-color: #8c99a4; | ||
| + | } | ||
| + | |||
| + | #smallnav a#pull { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* clears float around elemnts with this class */ | ||
| + | /* class clearfix should be used on all elements containing floats */ | ||
| + | |||
| + | .clearfix:before, | ||
| + | .clearfix:after { | ||
| + | content: " "; | ||
| + | display: table; | ||
| + | } | ||
| + | .clearfix:after { | ||
| + | clear: both; | ||
| + | } | ||
| + | .clearfix { | ||
| + | *zoom: 1; | ||
| + | } | ||
| + | |||
| + | } /* end of media query dont delete */ | ||
| − | |||
</style> | </style> | ||
| + | <!-- BEGIN: jQuery --> | ||
| − | + | <script type="text/javascript"> | |
| − | + | $(document).ready(function(){ | |
| − | + | ||
| − | + | ||
// make submenus appear // | // make submenus appear // | ||
| − | + | $("#home").hover(function(){ | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#project").hover(function(){ | |
| − | + | $("#project-sub") .show(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#project-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#team").hover(function(){ | |
| − | + | $("#team-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#team-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#results").hover(function(){ | |
| − | + | $("#results-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#policy").hover(function(){ | |
| − | + | $("#policy-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }); | |
| − | + | ||
| − | + | $("#notebook").hover(function(){ | |
| − | + | $("#notebook-sub") .show(); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
// make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | // make chip stay over main menu point when its submenu appears and makes the submenu stay visible// | ||
| − | + | $("#project-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','18.6%'); | |
| − | + | $("#project-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#project-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#team-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','35.5%'); | |
| − | + | $("#team-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#team-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#results-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','52%'); | |
| − | + | $("#results-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#results-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#policy-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','68.9%'); | |
| − | + | $("#policy-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#policy-sub") .hide(); | |
| − | + | }); | |
| − | + | $("#notebook-sub") .hover(function(){ | |
| − | + | $("#runningchip") .css('left','85.5%'); | |
| − | + | $("#notebook-sub") .show(); | |
| − | + | }, | |
| − | + | function(){ | |
| − | + | $("#runningchip") .css('left',''); | |
| − | + | $("#notebook-sub") .hide(); | |
| − | + | }); | |
| − | + | }); | |
| − | + | </script> | |
| − | + | ||
| Line 580: | Line 657: | ||
}); | }); | ||
| − | + | </script> | |
| + | |||
| + | <!-- END: jQuery --> | ||
| + | |||
| + | |||
| + | </head> | ||
| − | |||
| − | + | <!-- BEGIN: Body content --> | |
| + | <body> | ||
| + | <!-- BEGIN: Normal Menubar --> | ||
| − | |||
| − | |||
<div id="header"> | <div id="header"> | ||
<!-- Begin navigation menu icons --> | <!-- Begin navigation menu icons --> | ||
| Line 694: | Line 775: | ||
<!-- End of header --> | <!-- End of header --> | ||
| + | <!-- END: normal Menubar --> | ||
| + | |||
| + | |||
| + | <!-- BEGIN: Mobile Navigation --> | ||
| + | |||
| + | <div class="clearfix" id="smallnav"> | ||
| + | <ul class="clearfix"> | ||
| + | <li><a href="#">Home</a></li> | ||
| + | <li><a href="#">How-to</a></li> | ||
| + | <li><a href="#">Icons</a></li> | ||
| + | <li><a href="#">Design</a></li> | ||
| + | <li><a href="#">Web 2.0</a></li> | ||
| + | <li><a href="#">Tools</a></li> | ||
| + | </ul> | ||
| + | <a href="#" id="pull">Menu</a> | ||
| + | </div> | ||
| + | |||
| + | <!-- END: Mobile Navigation --> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 09:52, 16 September 2015