Codigo para agregar barra deslizante en el menu | Develop Site

Imagen de ernesto

Submitted by ernesto on

Si te gusta enriquecer la forma en que se ve tu menu principal, esta puede ser una buena opcion

  1. #top-menu .current-menu-item a::before,
  2. #top-menu .current_page_item a::before {
  3.  content: "";
  4.  position: absolute;
  5.  z-index: 2;
  6.  left: 0;
  7.  right: 0;
  8. }
  9. #top-menu li a:before {
  10.  content: "";
  11.  position: absolute;
  12.  z-index: -2;
  13.  left: 0;
  14.  right: 100%;
  15.  bottom: 50%;
  16.  background: #15bf86; /*** COLOR DE LA LINEA INFERIOR ***/
  17.  height: 3px; /*** GROSOR DE LA LINEA INFERIOR ***/
  18.  -webkit-transition-property: right;
  19.  transition-property: right;
  20.  -webkit-transition-duration: 0.3s;
  21.  transition-duration: 0.3s;
  22.  -webkit-transition-timing-function: ease-out;
  23.  transition-timing-function: ease-out;
  24. }
  25. #top-menu li a:hover {
  26.  opacity: 1 !important;
  27. }
  28. #top-menu li a:hover:before {
  29.  right: 0;
  30. }
  31. #top-menu li li a:before {
  32.  bottom: 10%;
  33. }
Español