Difference between revisions of "Template:Team:TU Eindhoven/Menu CSS"

Line 3: Line 3:
 
position:relative;
 
position:relative;
 
background: #ddeebb;
 
background: #ddeebb;
width:1900px;
+
width:1700px;
 
height:45px;
 
height:45px;
 
margin:0 auto;
 
margin:0 auto;
 
}
 
}
 
#submenu{
 
#submenu{
 +
position:relative;
 +
z-index:1;
 
background: #f6f0cc;
 
background: #f6f0cc;
 
width:1900px;
 
width:1900px;
Line 18: Line 20:
 
margin-left:200px;
 
margin-left:200px;
 
}
 
}
#menu a:not(#menufacebook):not(#menutwitter), #submenu a {
+
#menu a, #submenu a {
 
     position:relative;
 
     position:relative;
 
     font-weight: bold;  
 
     font-weight: bold;  
Line 39: Line 41:
  
 
#sub2,#sub3,#sub4,#sub5{
 
#sub2,#sub3,#sub4,#sub5{
width: 100%;
+
width:100%;
 
height:100%;
 
height:100%;
 
}
 
}
Line 58: Line 60:
 
#sub2,#sub3,#sub4,#sub5{
 
#sub2,#sub3,#sub4,#sub5{
 
display:none;
 
display:none;
 +
}
 +
 +
#top{
 +
background-image:url('http://www.moorsmagazine.com/images/boom.JPG');
 +
height:960px;
 +
width:100%;
 +
position:absolute;
 +
top:45px;
 
}
 
}
  
 
/*Twitter*/
 
/*Twitter*/
 
#twitter{
 
#twitter{
 +
top:45px;
 +
right:0;
 +
z-index:1;
 
display:none;
 
display:none;
 
position:absolute;
 
position:absolute;
left:calc(100% - 350px);
+
 
 
}
 
}
 
#twitter_logo{
 
#twitter_logo{
Line 72: Line 85:
 
/*FB*/
 
/*FB*/
 
#facebook{
 
#facebook{
 +
right:0;
 +
top:45px;
 +
z-index:1;
 
display:none;
 
display:none;
 
position:absolute;
 
position:absolute;
left:1630px;
+
 
 
}
 
}
 
#facebook_logo{
 
#facebook_logo{

Revision as of 20:42, 8 May 2015

#menu{ position:relative; background: #ddeebb; width:1700px; height:45px; margin:0 auto; } #submenu{ position:relative; z-index:1; background: #f6f0cc; width:1900px; height:0px; margin:0 auto; overflow:hidden; transition: height 0.2s; } #menu1{ margin-left:200px; } #menu a, #submenu a { position:relative; font-weight: bold; text-align: center; line-height: 45px; width:270px; display:block; text-decoration: none; float: left; color: #004415; } #menu1:hover, #menu2:hover, #menu3:hover, #menu4:hover, #menu5:hover{ color: #9DC671; } #sub2 > a:hover, #sub3 > a:hover, #sub4 > a:hover, #sub5 > a:hover{ color: #9DC671; } #sub2,#sub3,#sub4,#sub5{ width:100%; height:100%; } #sub2a{ margin-left: 65px; } #sub3a{ margin-left: 605px; } #sub4a{ margin-left: 740px; } #sub5a{ margin-left: 1280px; } #sub2,#sub3,#sub4,#sub5{ display:none; } #top{ background-image:url('http://www.moorsmagazine.com/images/boom.JPG'); height:960px; width:100%; position:absolute; top:45px; } /*Twitter*/ #twitter{ top:45px; right:0; z-index:1; display:none; position:absolute; } #twitter_logo{ height:45px; float:right; } /*FB*/ #facebook{ right:0; top:45px; z-index:1; display:none; position:absolute; } #facebook_logo{ height:45px; float:right; }