Difference between revisions of "Template:UPMC-Paris/Header"

Line 3: Line 3:
 
<div id="header" >
 
<div id="header" >
 
<nav id="colorNav">
 
<nav id="colorNav">
−
<text-align="center">
 
 
<ul>
 
<ul>
  
Line 69: Line 68:
  
 
<!-- More menu items -->
 
<!-- More menu items -->
 +
 +
/* MENU STYLE */
 +
 +
#sideFiller img {
 +
    width:95%;
 +
}
 +
 +
.hideMenu a {
 +
    color: white;
 +
    text-decoration:none;
 +
    display:block;
 +
    cursor: pointer;
 +
    cursor: hand;
 +
    outline : none;
 +
}
 +
 +
 +
.hideMenu {
 +
    list-style: none;
 +
    font-weight: bold;
 +
    cursor: pointer;
 +
    outline : none;
 +
    -moz-user-select:-moz-none;
 +
    -moz-user-select:none;
 +
      -o-user-select:none;
 +
  -khtml-user-select:none;
 +
-webkit-user-select:none;
 +
    -ms-user-select:none;
 +
        user-select:none;
 +
    text-align: center;
 +
    height: 100px;
 +
    width:80%;
 +
    float:left;
 +
    position:relative;
 +
    margin: 0px;
 +
    -webkit-transition: z-index 0s;
 +
      -moz-transition: z-index 0s;
 +
        -ms-transition: z-index 0s;
 +
        -o-transition: z-index 0s;
 +
            transition: z-index 0s;
 +
    -webkit-transition-delay: 1s;
 +
      -moz-transition-delay: 1s;
 +
        -ms-transition-delay: 1s;
 +
        -o-transition-delay: 1s;
 +
            transition-delay: 1s;
 +
}
 +
 +
#menuContainer .hideMenu {
 +
    margin:0.3em 0 0 0;
 +
}
 +
 +
.hideMenu li {
 +
    color: #fff;
 +
    text-transform:uppercase;
 +
    cursor: pointer;
 +
    margin:auto;
 +
    outline : none;
 +
/*    width:14.2857%;*/
 +
    width:16.66666666%;
 +
    float:left;
 +
    z-index:10; 
 +
    padding:10px 0 10px 0;
 +
    border-radius: 20px;
 +
    line-height:40px;
 +
}
 +
 +
.hideMenu li ul {
 +
    overflow:hidden;
 +
    border-radius: 0px 0px 20px 20px;
 +
    background: #00B058;
 +
    display:none;
 +
    position:relative;
 +
    margin: 10px 0 0 0;
 +
    z-index:100;
 +
    list-style: none;
 +
    width:100%;
 +
}
 +
 +
 +
 +
 +
.hideMenu li.sub {
 +
    height:60px;
 +
}
 +
.hideMenu li.ignoreSwitch {
 +
    line-height:normal;
 +
}
 +
.hideMenu li:hover {
 +
    color:  #FFF;
 +
    background-color: #00964B;
 +
    cursor: pointer;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background:      -o-linear-gradient(top,#00964B,#19b768);
 +
    background: -webkit-linear-gradient(top,#00964B,#19b768);
 +
    background:    -moz-linear-gradient(top,#00964B,#19b768);
 +
    background:        linear-gradient(top,#00964B,#19b768);
 +
}
 +
.hideMenu li:hover a{
 +
    color:  #FFF;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:block;
 +
}
 +
/*Style the submenu buttons*/
 +
.hideMenu li ul li {
 +
    text-transform:capitalize;
 +
    line-height:30px;
 +
    border-radius: 0px;
 +
    color: #383838;
 +
    background-clip: border-box;
 +
    padding:5px 0 5px 0;
 +
    width:100%;
 +
}
 +
 +
 +
@media only screen and (max-device-width: 480px) {
 +
.hideMenu {
 +
    text-align: left;
 +
    height:auto;
 +
    float:none;
 +
    margin: .3em 0 0 2em;
 +
    background-color:#383838;
 +
    position:absolute;
 +
    width:100%;
 +
}
 +
#menuContainer .hideMenu {
 +
    display:none;
 +
}
 +
 +
.hideMenu li {
 +
    font-size:70px;
 +
    width:auto;
 +
    line-height:120px;
 +
    float:left;
 +
    display:inline-block;
 +
    clear:both;
 +
    padding: 50px 0 50px 0;
 +
}
 +
.hideMenu li:hover {
 +
    background:transparent;
 +
}
 +
.hideMenu li.ignoreSwitch br {
 +
    display:none;
 +
}
 +
 +
.hideMenu li.sub {
 +
    height:auto;
 +
    line-height:60px;
 +
}
 +
.hideMenu li.sub:hover {
 +
    border-radius: 20px 20px 0px 0px;
 +
    background: transparent;
 +
}
 +
.hideMenu li ul {
 +
    margin: 0 0 0 20%;
 +
    background:transparent;
 +
    float:none;
 +
    width:100%;
 +
    display:none;
 +
}
 +
.hideMenu li:hover ul {
 +
    display:none;
 +
}
 +
.hideMenu li ul li {
 +
    line-height:120px;
 +
    color: #fff;
 +
}
 +
.hideMenu li ul li:hover {
 +
    line-height:120px;
 +
    color: #fff;
 +
    background-color: #00964B;
 +
}
 +
}
  
 
</ul>
 
</ul>

Revision as of 13:04, 28 September 2016