Difference between revisions of "Team:METU Turkey/Galery"

Line 5: Line 5:
 
    
 
    
 
<style>
 
<style>
−
 
+
ul.nav {border-bottom: 1px solid #999;}
−
 
+
    ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
−
 
+
     ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
−
#content {
+
     ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
−
    position: relative;
+
     ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
−
    width: 1350px;
+
    ul.nav > li ul {display: none; position: absolute; left: -1px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px; width: 365px;}
−
    margin: 0 auto;
+
    ul.nav > li:hover ul {display: block;}
−
    padding: 5px 5px 5px 5px;
+
     ul.nav > li ul li {display: inline-block;}
−
    background: white;
+
−
    color: black;
+
−
    border-color: white;
+
−
}
+
−
 
+
−
.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;
+
−
}
+
−
 
+
  
  
Line 120: Line 26:
 
      
 
      
 
      
 
      
−
<div class="menu-wrap">
+
ul class="nav">
−
<nav class="menu">
+
        <li>
−
<ul class="clearfix">
+
            <a href="#">Menu 1</a>
−
<li><a href="#">Home</a></li>
+
            <ul>
−
<li>
+
                <li><a href="#">Sub Menu Item</a></li>
−
<a href="#">Movies <span class="arrow">▼</span></a>
+
                <li><a href="#">Sub Menu Item</a></li>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
            </ul>
 +
        </li>
 +
        <li>
 +
            <a href="#">Menu 2</a>
 +
            <ul>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
            </ul>
 +
        </li>
 +
        <li>
 +
            <a href="#">Menu 3</a>
 +
            <ul>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
                <li><a href="#">Sub Menu Item</a></li>
 +
            </ul>
 +
        </li>
 +
    </ul>
  
−
<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>   
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 22:21, 4 September 2015

ul class="nav">

  • Menu 1
  • Menu 2
  • Menu 3