Difference between revisions of "Template:Freiburg/MenubarTest"

Line 4: Line 4:
 
         <title>""</title>
 
         <title>""</title>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
−
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
 
 
         <style>
 
         <style>
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
 
/* ============= BEGIN: Stylesheet for navigation menu ============= */
Line 157: Line 157:
 
/* ==== End classes for icons ==== */
 
/* ==== End classes for icons ==== */
  
−
@media screen and (min-width: 850px){
 
  
 
/* ==== Begin running chip ==== */
 
/* ==== Begin running chip ==== */
Line 437: 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 */
 
  
 +
/* ============= BEGIN: Stylesheet for navigation menu ============= */ 
 
</style>
 
</style>
  
−
<!-- BEGIN: jQuery -->
 
  
−
<script type="text/javascript">
+
<!------------- BEGIN: jQuery ------------->
−
        $(document).ready(function(){
+
        <script type="text/javascript">
 +
            $(function() {
 +
                $("document").ready(function(){
 
// make submenus appear //
 
// make submenus appear //
−
            $("#home").hover(function(){
+
                    $("#home").hover(function(){
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            });
+
                    });
−
            $("#project").hover(function(){  
+
                    $("#project").hover(function(){  
−
                $("#project-sub") .show();
+
                        $("#project-sub") .show();
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
            });
+
                    });
−
           
+
                   
−
            $("#team").hover(function(){
+
                    $("#team").hover(function(){
−
                $("#team-sub") .show();
+
                        $("#team-sub") .show();
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
            });
+
                    });
−
           
+
                   
−
            $("#results").hover(function(){
+
                    $("#results").hover(function(){
−
                $("#results-sub") .show();
+
                        $("#results-sub") .show();
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            });
+
                    });
−
           
+
                   
−
            $("#policy").hover(function(){
+
                    $("#policy").hover(function(){
−
                $("#policy-sub") .show();
+
                        $("#policy-sub") .show();
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
            });
+
                    });
−
           
+
                   
−
            $("#notebook").hover(function(){
+
                    $("#notebook").hover(function(){
−
                $("#notebook-sub") .show();
+
                        $("#notebook-sub") .show();
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#notebook-sub") .hide();
+
                        $("#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(){
+
                    $("#project-sub") .hover(function(){
−
                $("#runningchip") .css('left','18.6%');
+
                        $("#runningchip") .css('left','18.6%');
−
                $("#project-sub") .show();
+
                        $("#project-sub") .show();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#runningchip") .css('left','');
+
                        $("#runningchip") .css('left','');
−
                $("#project-sub") .hide();
+
                        $("#project-sub") .hide();
−
            });
+
                    });
−
            $("#team-sub") .hover(function(){
+
                    $("#team-sub") .hover(function(){
−
                $("#runningchip") .css('left','35.5%');
+
                        $("#runningchip") .css('left','35.5%');
−
                $("#team-sub") .show();
+
                        $("#team-sub") .show();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#runningchip") .css('left','');
+
                        $("#runningchip") .css('left','');
−
                $("#team-sub") .hide();
+
                        $("#team-sub") .hide();
−
            });
+
                    });
−
            $("#results-sub") .hover(function(){
+
                    $("#results-sub") .hover(function(){
−
                $("#runningchip") .css('left','52%');
+
                        $("#runningchip") .css('left','52%');
−
                $("#results-sub") .show();
+
                        $("#results-sub") .show();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#runningchip") .css('left','');
+
                        $("#runningchip") .css('left','');
−
                $("#results-sub") .hide();
+
                        $("#results-sub") .hide();
−
            });
+
                    });
−
            $("#policy-sub") .hover(function(){
+
                    $("#policy-sub") .hover(function(){
−
                $("#runningchip") .css('left','68.9%');
+
                        $("#runningchip") .css('left','68.9%');
−
                $("#policy-sub") .show();
+
                        $("#policy-sub") .show();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#runningchip") .css('left','');
+
                        $("#runningchip") .css('left','');
−
                $("#policy-sub") .hide();
+
                        $("#policy-sub") .hide();
−
            });
+
                    });
−
            $("#notebook-sub") .hover(function(){
+
                    $("#notebook-sub") .hover(function(){
−
                $("#runningchip") .css('left','85.5%');
+
                        $("#runningchip") .css('left','85.5%');
−
                $("#notebook-sub") .show();
+
                        $("#notebook-sub") .show();
−
            },
+
                    },
−
                                    function(){
+
                                            function(){
−
                $("#runningchip") .css('left','');
+
                        $("#runningchip") .css('left','');
−
                $("#notebook-sub") .hide();
+
                        $("#notebook-sub") .hide();
−
            });
+
                    });
−
        });
+
                });
−
</script>
+
            })
 +
        </script>
  
  
Line 658: Line 580:
 
         });
 
         });
  
−
</script>
+
        </script>
−
 
+
−
<!-- END: jQuery -->
+
−
 
+
−
 
+
−
</head>
+
  
 +
<!------------- END: jQuery ------------->
  
−
<!-- BEGIN: Body content -->
+
    </head>
−
<body>
+
  
−
<!-- BEGIN: Normal Menubar -->
 
  
 +
<!------------- BEGIN: Body content =------------->
 +
    <body>
 
       <div id="header">
 
       <div id="header">
 
<!-- Begin navigation menu icons -->
 
<!-- Begin navigation menu icons -->
Line 776: Line 694:
  
 
<!-- 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:51, 16 September 2015

""