Difference between revisions of "Template:GO Paris-Saclay/navbarcss"

Line 297: Line 297:
 
}
 
}
  
−
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);
+
a {
−
#cssmenu {
+
−
  background: #4cb6ea;
+
−
  margin: 0;
+
−
  width: auto;
+
−
  padding: 0;
+
−
  line-height: 1;
+
−
  display: block;
+
−
  position: ab;
+
−
  font-family: 'PT Sans', sans-serif;
+
−
}
+
−
#cssmenu ul {
+
−
  list-style: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  display: block;
+
−
}
+
−
#cssmenu ul:after,
+
−
#cssmenu:after {
+
−
  content: " ";
+
−
  display: block;
+
−
  font-size: 0;
+
−
  height: 0;
+
−
  clear: both;
+
−
  visibility: hidden;
+
−
}
+
−
#cssmenu ul li {
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  display: block;
+
−
  position: relative;
+
−
}
+
−
#cssmenu ul li a {
+
 
   text-decoration: none;
 
   text-decoration: none;
−
  display: block;
 
−
  margin: 0;
 
−
  -webkit-transition: color .2s ease;
 
−
  -moz-transition: color .2s ease;
 
−
  -ms-transition: color .2s ease;
 
−
  -o-transition: color .2s ease;
 
−
  transition: color .2s ease;
 
−
  -webkit-box-sizing: border-box;
 
−
  -moz-box-sizing: border-box;
 
−
  box-sizing: border-box;
 
 
}
 
}
−
#cssmenu ul li ul {
+
 
−
  position: absolute;
+
nav {
−
  left: -9999px;
+
    font-family: monospace;
−
  top: auto;
+
 
}
 
}
−
#cssmenu ul li ul li {
+
 
−
   max-height: 0;
+
ul {
−
  position: absolute;
+
   background: darkorange;
−
  -webkit-transition: max-height 0.4s ease-out;
+
    list-style: none;
−
  -moz-transition: max-height 0.4s ease-out;
+
    margin: 0;
−
  -ms-transition: max-height 0.4s ease-out;
+
    padding-left: 0;
−
  -o-transition: max-height 0.4s ease-out;
+
−
  transition: max-height 0.4s ease-out;
+
−
  background: #ffffff;
+
 
}
 
}
−
#cssmenu ul li ul li.has-sub:after {
+
 
−
  display: block;
+
li {
−
   position: absolute;
+
    color: #fff;
−
  content: "";
+
   background: darkorange;
−
  height: 10px;
+
    display: block;
−
  width: 10px;
+
    float: left;
−
  border-radius: 5px;
+
    padding: 1rem;
−
  background: #000000;
+
    position: relative;
−
   z-index: 1;
+
    text-decoration: none;
−
  top: 13px;
+
   transition-duration: 0.5s;
−
  right: 15px;
+
 
}
 
}
−
#cssmenu.align-right ul li ul li.has-sub:after {
+
 
−
   right: auto;
+
li a {
−
  left: 15px;
+
   color: #fff;
 
}
 
}
−
#cssmenu ul li ul li.has-sub:before {
+
 
−
  display: block;
+
li:hover {
−
  position: absolute;
+
    background: red;
−
  content: "";
+
    cursor: pointer;
−
  height: 0;
+
−
  width: 0;
+
−
  border: 3px solid transparent;
+
−
  border-left-color: #ffffff;
+
−
  z-index: 2;
+
−
  top: 15px;
+
−
  right: 15px;
+
 
}
 
}
−
#cssmenu.align-right ul li ul li.has-sub:before {
+
 
−
   right: auto;
+
ul li ul {
−
   left: 15px;
+
    background: orange;
−
   border-left-color: transparent;
+
    visibility: hidden;
−
   border-right-color: #ffffff;
+
   opacity: 0;
 +
   min-width: 5rem;
 +
    position: absolute;
 +
   transition: all 0.5s ease;
 +
  margin-top: 1rem;
 +
    left: 0;
 +
   display: none;
 
}
 
}
−
#cssmenu ul li ul li a {
+
 
−
   font-size: 14px;
+
ul li:hover > ul,
−
  font-weight: 400;
+
ul li ul:hover {
−
  text-transform: none;
+
   visibility: visible;
−
  color: #000000;
+
   opacity: 1;
−
   letter-spacing: 0;
+
 
   display: block;
 
   display: block;
−
  width: 170px;
 
−
  padding: 11px 10px 11px 20px;
 
 
}
 
}
−
#cssmenu ul li ul li:hover > a,
+
 
−
#cssmenu ul li ul li.active > a {
+
ul li ul li {
−
  color: #4cb6ea;
+
    clear: both;
−
}
+
−
#cssmenu ul li ul li:hover:after,
+
−
#cssmenu ul li ul li.active:after {
+
−
  background: #4cb6ea;
+
−
}
+
−
#cssmenu ul li ul li:hover > ul {
+
−
  left: 100%;
+
−
  top: 0;
+
−
}
+
−
#cssmenu ul li ul li:hover > ul > li {
+
−
  max-height: 72px;
+
−
  position: relative;
+
−
}
+
−
#cssmenu > ul > li {
+
−
  float: left;
+
−
}
+
−
#cssmenu.align-center > ul > li {
+
−
  float: none;
+
−
  display: inline-block;
+
−
}
+
−
#cssmenu.align-center > ul {
+
−
  text-align: center;
+
−
}
+
−
#cssmenu.align-center ul ul {
+
−
  text-align: left;
+
−
}
+
−
#cssmenu.align-right > ul {
+
−
  float: right;
+
−
}
+
−
#cssmenu.align-right > ul > li:hover > ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
}
+
−
#cssmenu.align-right ul ul li:hover > ul {
+
−
  right: 100%;
+
−
  left: auto;
+
−
}
+
−
#cssmenu.align-right ul ul li a {
+
−
  text-align: right;
+
−
}
+
−
#cssmenu > ul > li:after {
+
−
  content: "";
+
−
  display: block;
+
−
  position: absolute;
+
 
   width: 100%;
 
   width: 100%;
−
  height: 0;
 
−
  top: 0;
 
−
  z-index: 0;
 
−
  background: #ffffff;
 
−
  -webkit-transition: height .2s;
 
−
  -moz-transition: height .2s;
 
−
  -ms-transition: height .2s;
 
−
  -o-transition: height .2s;
 
−
  transition: height .2s;
 
 
}
 
}
−
#cssmenu > ul > li.has-sub > a {
 
−
  padding-right: 40px;
 
−
}
 
−
#cssmenu > ul > li.has-sub > a:after {
 
−
  display: block;
 
−
  content: "";
 
−
  background: #ffffff;
 
−
  height: 12px;
 
−
  width: 12px;
 
−
  position: absolute;
 
−
  border-radius: 13px;
 
−
  right: 14px;
 
−
  top: 16px;
 
−
}
 
−
#cssmenu > ul > li.has-sub > a:before {
 
−
  display: block;
 
−
  content: "";
 
−
  border: 4px solid transparent;
 
−
  border-top-color: #4cb6ea;
 
−
  z-index: 2;
 
−
  height: 0;
 
−
  width: 0;
 
−
  position: absolute;
 
−
  right: 16px;
 
−
  top: 21px;
 
−
}
 
−
#cssmenu > ul > li > a {
 
−
  color: #ffffff;
 
−
  padding: 15px 20px;
 
−
  font-weight: 700;
 
−
  letter-spacing: 1px;
 
−
  text-transform: uppercase;
 
−
  font-size: 14px;
 
−
  z-index: 2;
 
−
  position: relative;
 
−
}
 
−
#cssmenu > ul > li:hover:after,
 
−
#cssmenu > ul > li.active:after {
 
−
  height: 100%;
 
−
}
 
−
#cssmenu > ul > li:hover > a,
 
−
#cssmenu > ul > li.active > a {
 
−
  color: #000000;
 
−
}
 
−
#cssmenu > ul > li:hover > a:after,
 
−
#cssmenu > ul > li.active > a:after {
 
−
  background: #000000;
 
−
}
 
−
#cssmenu > ul > li:hover > a:before,
 
−
#cssmenu > ul > li.active > a:before {
 
−
  border-top-color: #ffffff;
 
−
}
 
−
#cssmenu > ul > li:hover > ul {
 
−
  left: 0;
 
−
}
 
−
#cssmenu > ul > li:hover > ul > li {
 
−
  max-height: 72px;
 
−
  position: relative;
 
−
}
 
−
#cssmenu #menu-button {
 
−
  display: none;
 
−
}
 
−
#cssmenu > ul > li > a {
 
−
  display: block;
 
−
}
 
−
#cssmenu > ul > li {
 
−
  width: auto;
 
−
}
 
−
#cssmenu > ul > li > ul {
 
−
  width: 170px;
 
−
  display: block;
 
−
}
 
−
#cssmenu > ul > li > ul > li {
 
−
  width: 170px;
 
−
  display: block;
 
−
}
 
−
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
 
−
  #cssmenu > ul {
 
−
    max-height: 0;
 
−
    overflow: hidden;
 
−
    -webkit-transition: max-height 0.35s ease-out;
 
−
    -moz-transition: max-height 0.35s ease-out;
 
−
    -ms-transition: max-height 0.35s ease-out;
 
−
    -o-transition: max-height 0.35s ease-out;
 
−
    transition: max-height 0.35s ease-out;
 
−
  }
 
−
  #cssmenu > ul > li > ul {
 
−
    width: 100%;
 
−
    display: block;
 
−
  }
 
−
  #cssmenu.align-right ul li a {
 
−
    text-align: left;
 
−
  }
 
−
  #cssmenu > ul > li > ul > li {
 
−
    width: 100%;
 
−
    display: block;
 
−
  }
 
−
  #cssmenu.align-right ul ul li a {
 
−
    text-align: left;
 
−
  }
 
−
  #cssmenu > ul > li > ul > li > a {
 
−
    width: 100%;
 
−
    display: block;
 
−
  }
 
−
  #cssmenu ul li ul li a {
 
−
    width: 100%;
 
−
  }
 
−
  #cssmenu.align-center > ul {
 
−
    text-align: left;
 
−
  }
 
−
  #cssmenu.align-center > ul > li {
 
−
    display: block;
 
−
  }
 
−
  #cssmenu > ul.open {
 
−
    max-height: 1000px;
 
−
    border-top: 1px solid rgba(110, 110, 110, 0.25);
 
−
  }
 
−
  #cssmenu ul {
 
−
    width: 100%;
 
−
  }
 
−
  #cssmenu ul > li {
 
−
    float: none;
 
−
    width: 100%;
 
−
  }
 
−
  #cssmenu ul li a {
 
−
    -webkit-box-sizing: border-box;
 
−
    -moz-box-sizing: border-box;
 
−
    box-sizing: border-box;
 
−
    width: 100%;
 
−
    padding: 12px 20px;
 
−
  }
 
−
  #cssmenu ul > li:after {
 
−
    display: none;
 
−
  }
 
−
  #cssmenu ul li.has-sub > a:after,
 
−
  #cssmenu ul li.has-sub > a:before,
 
−
  #cssmenu ul li ul li.has-sub:after,
 
−
  #cssmenu ul li ul li.has-sub:before {
 
−
    display: none;
 
−
  }
 
−
  #cssmenu ul li ul,
 
−
  #cssmenu ul li ul li ul,
 
−
  #cssmenu ul li ul li:hover > ul,
 
−
  #cssmenu.align-right ul li ul,
 
−
  #cssmenu.align-right ul li ul li ul,
 
−
  #cssmenu.align-right ul li ul li:hover > ul {
 
−
    left: 0;
 
−
    position: relative;
 
−
    right: auto;
 
−
  }
 
−
  #cssmenu ul li ul li,
 
−
  #cssmenu ul li:hover > ul > li {
 
−
    max-height: 999px;
 
−
    position: relative;
 
−
    background: none;
 
−
  }
 
−
  #cssmenu ul li ul li a {
 
−
    padding: 8px 20px 8px 35px;
 
−
    color: #ffffff;
 
−
  }
 
−
  #cssmenu ul li ul ul li a {
 
−
    padding: 8px 20px 8px 50px;
 
−
  }
 
−
  #cssmenu ul li ul li:hover > a {
 
−
    color: #000000;
 
−
  }
 
−
  #cssmenu #menu-button {
 
−
    display: block;
 
−
    -webkit-box-sizing: border-box;
 
−
    -moz-box-sizing: border-box;
 
−
    box-sizing: border-box;
 
−
    width: 100%;
 
−
    padding: 15px 20px;
 
−
    text-transform: uppercase;
 
−
    font-weight: 700;
 
−
    font-size: 14px;
 
−
    letter-spacing: 1px;
 
−
    color: #ffffff;
 
−
    cursor: pointer;
 
−
  }
 
−
  #cssmenu #menu-button:after {
 
−
    display: block;
 
−
    content: '';
 
−
    position: absolute;
 
−
    height: 3px;
 
−
    width: 22px;
 
−
    border-top: 2px solid #ffffff;
 
−
    border-bottom: 2px solid #ffffff;
 
−
    right: 20px;
 
−
    top: 16px;
 
−
  }
 
−
  #cssmenu #menu-button:before {
 
−
    display: block;
 
−
    content: '';
 
−
    position: absolute;
 
−
    height: 3px;
 
−
    width: 22px;
 
−
    border-top: 2px solid #ffffff;
 
−
    right: 20px;
 
−
    top: 26px;
 
  
  
−
  }
 
−
}
 
−
 
−
    </style>
 
−
  </head>
 
  
−
<script>
+
</style>
−
( function( $ ) {
+
−
$( document ).ready(function() {
+
−
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
+
−
$('#cssmenu #menu-button').on('click', function(){
+
−
var menu = $(this).next('ul');
+
−
if (menu.hasClass('open')) {
+
−
menu.removeClass('open');
+
−
}
+
−
else {
+
−
menu.addClass('open');
+
−
}
+
−
});
+
−
});
+
−
} )( jQuery );
+
−
</script>
+
 
</html>
 
</html>

Revision as of 21:27, 21 September 2018