Difference between revisions of "Team:Warwick/test"

 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Warwick}}
+
<style>
−
 
+
div.floating-menu {position:fixed; left:0px; top:42px; padding:0px;;width:140px;z-index:10;}
−
 
+
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.1em;}
−
 
+
</style>
−
 
+
<div class="floating-menu">
−
<html>
+
<h3><a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Open Menu</a></p></h3>
−
 
+
−
<div class="menu-wrap">
+
−
    <nav class="menu">
+
−
        <ul class="clearfix">
+
−
            <li><a href="#">Home</a></li>
+
−
            <li>
+
−
                <a href="#">Movies <span class="arrow">&#9660;</span></a>
+
−
+
−
                <ul class="sub-menu">
+
−
                    <li><a href="#">In Cinemas Now</a></li>
+
−
                    <li><a href="#">Coming Soon</a></li>
+
−
                    <li><a href="#">On DVD/Blu-ray</a></li>
+
−
                    <li><a href="#">Showtimes &amp; Tickets</a></li>
+
−
                </ul>
+
−
            </li>
+
−
            <li><a href="#">T.V. Shows</a></li>
+
−
            <li class="current-item"><a href="#">Photos</a></li>
+
−
            <li><a href="#">Site Help</a></li>
+
−
        </ul>
+
−
    </nav>
+
 
</div>
 
</div>
  
Line 31: Line 11:
  
  
−
<div class="menu-wrap">
 
−
    <nav class="menu">
 
−
        <!-- NAV -->
 
−
    </nav>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<style>body
 
−
 
−
.clearfix:after {
 
−
    display:block;
 
−
    clear:both;
 
−
}
 
−
 
−
/*----- Menu Outline -----*/
 
−
.menu-wrap {
 
−
    width:100%;
 
−
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
 
−
    background:#3e3436;
 
−
}
 
−
 
−
.menu {
 
−
    width:1000px;
 
−
    margin:0px auto;
 
−
}
 
−
 
−
.menu li {
 
−
    margin:0px;
 
−
    list-style:none;
 
−
    font-family:'Ek Mukta';
 
−
}
 
−
 
−
.menu a {
 
−
    transition:all linear 0.15s;
 
−
    color:#919191;
 
−
}
 
−
 
−
.menu li:hover > a, .menu .current-item > a {
 
−
    text-decoration:none;
 
−
    color:#be5b70;
 
−
}
 
−
 
−
.menu .arrow {
 
−
    font-size:11px;
 
−
    line-height:0%;
 
−
}
 
−
 
−
/*----- Top Level -----*/
 
−
.menu > ul > li {
 
−
    float:left;
 
−
    display:inline-block;
 
−
    position:relative;
 
−
    font-size:19px;
 
−
}
 
−
 
−
.menu > ul > li > a {
 
−
    padding:10px 40px;
 
−
    display:inline-block;
 
−
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
 
−
}
 
−
 
−
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
 
−
    background:#2e2728;
 
−
}
 
−
 
−
/*----- Bottom Level -----*/
 
−
.menu li:hover .sub-menu {
 
−
    z-index:1;
 
−
    opacity:1;
 
−
}
 
−
 
−
.sub-menu {
 
−
    width:160%;
 
−
    padding:5px 0px;
 
−
    position:absolute;
 
−
    top:100%;
 
−
    left:0px;
 
−
    z-index:-1;
 
−
    opacity:0;
 
−
    transition:opacity linear 0.15s;
 
−
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
 
−
    background:#2e2728;
 
−
}
 
−
 
−
.sub-menu li {
 
−
    display:block;
 
−
    font-size:16px;
 
−
}
 
−
 
−
.sub-menu li a {
 
−
    padding:10px 30px;
 
−
    display:block;
 
−
}
 
−
 
−
.sub-menu li a:hover, .sub-menu .current-item a {
 
−
    background:#3e3436;
 
−
}
 
−
</style>
 
  
−
</html>
+
<script>$("#menu-toggle").click(function(e) {
 +
        e.preventDefault();
 +
        $("#wrapper").toggleClass("toggled");
 +
    });</script>

Latest revision as of 14:18, 9 September 2015

<style> div.floating-menu {position:fixed; left:0px; top:42px; padding:0px;;width:140px;z-index:10;} div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.1em;} </style>

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Open Menu</a></p>




<script>$("#menu-toggle").click(function(e) { 

       e.preventDefault();
       $("#wrapper").toggleClass("toggled");
   });</script>