Difference between revisions of "Template:AFCM-Egypt"

Line 12: Line 12:
 
body{ background:#ccc; margin:0;}
 
body{ background:#ccc; margin:0;}
 
#container{width:100%; margin:0 auto; background:#fff;}
 
#container{width:100%; margin:0 auto; background:#fff;}
−
#header{width:100%; height:60px;border-bottom:1px solid #c7c7c7;Background:#333;}
+
#header{width:100%; height:100px;border-bottom:1px solid #c7c7c7;Background:#333;}
 
#logo{float:left; width:40px; height:40px; margin:10px;background:#ccc;}
 
#logo{float:left; width:40px; height:40px; margin:10px;background:#ccc;}
 
#top_info{float:right; width:100px; height:40px; background:#666; border:1px solid #c7c7c7; margin:10px;}
 
#top_info{float:right; width:100px; height:40px; background:#666; border:1px solid #c7c7c7; margin:10px;}
 
#navbar{height:50px;clear:both;}
 
#navbar{height:50px;clear:both;}
−
.container {
+
.igem_2017_menu_wrapper{
 
     overflow: hidden;
 
     overflow: hidden;
 
     background-color: #333;
 
     background-color: #333;
Line 22: Line 22:
 
}
 
}
  
−
.container a {
+
.igem_2017_menu_wrapper a {
 
     float: left;
 
     float: left;
 
     font-size: 16px;
 
     font-size: 16px;
Line 31: Line 31:
 
}
 
}
  
−
.dropdown {
+
.submenu_wrapper{
 
     float: left;
 
     float: left;
 
     overflow: hidden;
 
     overflow: hidden;
 
}
 
}
  
−
.dropdown .dropbtn {
+
.submenu_wrapper .dropbtn {
 
     font-size: 16px;     
 
     font-size: 16px;     
 
     border: none;
 
     border: none;
Line 49: Line 49:
 
}
 
}
  
−
.dropdown-content {
+
.submenu_button {
 
     display: none;
 
     display: none;
 
     position: absolute;
 
     position: absolute;
Line 58: Line 58:
 
}
 
}
  
−
.dropdown-content a {
+
.submenu_button a {
 
     float: none;
 
     float: none;
 
     color: white;
 
     color: white;
Line 67: Line 67:
 
}
 
}
  
−
.dropdown-content a:hover {
+
.submenu_button a:hover {
 
     background-color: #ddd;
 
     background-color: #ddd;
 
}
 
}
  
−
.dropdown:hover .dropdown-content {
+
.submenu_wrapper:hover .submenu_button {
 
     display: block;
 
     display: block;
 
}
 
}
Line 87: Line 87:
 
<div id="top_info">Top_Info</div>
 
<div id="top_info">Top_Info</div>
 
<div id="navbar">
 
<div id="navbar">
−
<div class="container">
+
<div class="igem_2017_menu_wrapper">
−
  <a href="#home">Home</a>
+
 
−
   <a href="#news">News</a>
+
<div class="menu_button" id="display_menu_control">
−
   <div class="dropdown">
+
MENU 
−
     <button class="dropbtn">Dropdown</button>
+
</div>  
−
     <div class="dropdown-content">
+
 
−
      <a href="#">Link 1</a>
+
   <a href="https://2017.igem.org/Team:AFCM-Egypt">HOME</a>
−
      <a href="#">Link 2</a>
+
   <div class="submenu_wrapper">
−
      <a href="#">Link 3</a>
+
     <button class="dropbtn">TEAM</button>
−
    </div>
+
     <div class="submenu_button">
 +
    <a href="https://2017.igem.org/Team:AFCM-Egypt/Team">Team</a
 +
    <a href="https://2017.igem.org/Team:AFCM-Egypt/Collaborations">Collaborations</a>
 +
    </div>
 
   </div>  
 
   </div>  
−
  <a href="#news">Link</a>
+
<div class="submenu_wrapper">
 +
    <button class="dropbtn">PROJECT</button>
 +
    <div class="submenu_button">
 +
<a href="https://2017.igem.org/Team:AFCM-Egypt/Description">Description</a
 +
    <a href="https://2017.igem.org/Team:AFCM-Egypt/Design">Design</a>
 +
    </div>
 +
  </div>  
 +
 
 
</div>
 
</div>
 
</div>
 
</div>

Revision as of 04:12, 9 August 2017