Difference between revisions of "Template:CSS UCL5"

Line 6: Line 6:
  
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 +
 +
 +
<script>$(document).ready(function() {
 +
    $('#hidden-menu').next().hide();
 +
    $('#hidden-menu').hover( function() {
 +
        $(this).next().toggle();
 +
    });
 +
});</script>
  
 
<style type="text/css">
 
<style type="text/css">
Line 412: Line 420:
 
/*menu*/
 
/*menu*/
  
−
.fixed-nav-bar {
+
nav {
 
   position: fixed;
 
   position: fixed;
 
   top: 15px;
 
   top: 15px;
Line 426: Line 434:
  
 
@media(max-width:855px){
 
@media(max-width:855px){
−
.fixed-nav-bar {height:90px;}
+
nav {height:90px;}
 
}
 
}
  
 
@media(max-width:463px){
 
@media(max-width:463px){
  
−
.fixed-nav-bar {height:120px;}
+
nav {height:120px;}
 
}
 
}
  
 
@media(max-width:400px){
 
@media(max-width:400px){
−
.fixed-nav-bar {height:150px;}
+
nav {height:150px;}
 
}
 
}
 +
 +
/* CHANGE */
 +
/* @media (max-width: 300px){
 +
nav {display:none;}
 +
nav ul {display:none;}
 +
#hidden-menu {display:inline;}
 +
}
 +
 +
@media (min-width: 300px){
 +
#hidden-menu {display:none;}
 +
}
 +
 +
 +
#hidden-menu:hover ul{
 +
display:block;
 +
height:auto;
 +
width:auto;
 +
}
 +
 +
#hidden-menu ul li{
 +
display:none;
 +
clear:both;
 +
background-color: #787172;
 +
text-align: center;
 +
display: block;
 +
}
 +
 +
#hidden-menu ul {
 +
display:none;
 +
position:absolute;
 +
border:1px solid black;
 +
top:40px;
 +
}*/
 +
 +
/*CHANGE END*/
 +
 +
 +
 +
  
  
Line 657: Line 704:
 
<div style="clear: both;"></div>
 
<div style="clear: both;"></div>
 
<div id="container">
 
<div id="container">
−
<nav class="fixed-nav-bar">
+
<nav>
 
<div id="menu" class="menu">
 
<div id="menu" class="menu">
 
<div class="menu-items">
 
<div class="menu-items">

Revision as of 12:01, 23 July 2015