Difference between revisions of "Template:Freiburg/MenubarTest"

Line 446: Line 446:
 
}
 
}
  
 +
nav {
 +
    height: 40px;
 +
    width: 100%;
 +
    background: #455868;
 +
    font-size: 11pt;
 +
    font-weight: bold;
 +
    position: relative;
 +
    border-bottom: 2px solid #283744;
 
}
 
}
 +
 +
nav ul {
 +
    padding: 0;
 +
    margin: 0 auto;
 +
    width: 600px;
 +
    height: 40px;
 +
}
 +
 +
/* display list elements on the left */
 +
nav li {
 +
    display: inline;
 +
    float: left;
 +
}
 +
 +
/* 6 elements in 600 px make 100px per element */
 +
nav a {
 +
    color: #fff;
 +
    display: inline-block;
 +
    width: 100px;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    line-height: 40px;
 +
    text-shadow: 1px 1px 0px #283744;
 +
}
 +
 +
nav li a {
 +
    border-right: 1px solid #576979;
 +
    box-sizing:border-box;
 +
    -moz-box-sizing:border-box;
 +
    -webkit-box-sizing:border-box;
 +
}
 +
nav li:last-child a {
 +
    border-right: 0;
 +
 +
nav a:hover, nav a:active {
 +
    background-color: #8c99a4;
 +
}
 +
 +
nav 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">
 
<script type="text/javascript">
 
         $(document).ready(function(){
 
         $(document).ready(function(){
Line 585: Line 654:
 
         });
 
         });
  
−
        </script>
+
</script>
 +
 
 +
<!-- END: jQuery -->
 +
 
 +
 
 +
</head>
  
−
<!------------- END: jQuery ------------->
 
  
−
    </head>
+
<!-- BEGIN: Body content -->
 +
<body>
  
 +
<!-- BEGIN: Normal Menubar -->
  
−
<!------------- BEGIN: Body content =------------->
 
−
    <body>
 
 
       <div id="header">
 
       <div id="header">
 
<!-- Begin navigation menu icons -->
 
<!-- Begin navigation menu icons -->
Line 699: Line 772:
  
 
<!-- End of header -->     
 
<!-- End of header -->     
 +
<!-- END: normal Menubar -->
 +
 +
 +
<!-- BEGIN: Mobile Navigation -->
 +
 +
        <nav class="clearfix">
 +
            <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>
 +
        </nav>
 +
 +
<!-- END: Mobile Navigation -->
  
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 09:33, 16 September 2015

""