Tema: Hacer menú responsive a partir de estilos
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/05/2015, 07:18
Avatar de ceaped
ceaped
 
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 11 meses
Puntos: 9
Pregunta Hacer menú responsive a partir de estilos
Buenos días
Tengo este menú:

Código CSS: 
Ver original
  1. #navbar {
  2.     width: 95%;
  3.     height: auto;
  4.     list-style: none;
  5.     margin: 12px 0 0 2%;
  6.     border: none;
  7.     }
  8.  
  9. #navbar a {
  10.     font-size: 1em;
  11.     letter-spacing: 0.05em;
  12. }
  13.  
  14. #main {
  15.     display: inline-block;
  16.     margin: -20px auto 0 auto;
  17.     padding: 0 auto 15px auto;
  18. }
  19.  
  20. #breadcrumb a:hover {   
  21.     color: #BE171E;
  22. }
  23.  
  24.  
  25. ul.menu {
  26.     width: 100%;
  27.     height: auto;   
  28.     margin: 0 auto 10px auto;   
  29.     background-color: #D8D0B9;
  30.     list-style: none;
  31.     
  32.     /* Sombra */
  33.     -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  34.     -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  35.     box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  36.     }
  37.  
  38. ul.menu li {
  39.     font-family: 'Merriweather', serif;
  40.     color: #FF0000;
  41.     text-align: center;
  42.     line-height: 45px;
  43.     width: auto;
  44.     height: auto;
  45.     display: block;
  46.     padding: 0;
  47.     }
  48.  
  49. ul.menu li.current {
  50.     font-weight: bold;
  51.     }
  52.  
  53. ul.menu a {
  54.     font-family: 'Merriweather', serif;
  55.     font-size: 1.2em;
  56.     text-align: center;
  57.     color: #023568;
  58.     line-height: 50px;
  59.     text-decoration: none;
  60.     text-transform: none;
  61.     width: 100%;
  62.     height: 50px;
  63.     padding-left: 10px;
  64.     padding-right: 10px;
  65.     display: inline-block;
  66.     background-color: transparent;
  67. }
  68.  
  69. ul.menu a:hover {
  70.     color: #FFFFFF;
  71.     height: 50px !important;
  72.     background-color: #023568;
  73.     
  74.     /* Borde redondeados */
  75.     border-radius: 0px 0px 0px 0px;
  76. }
  77.  
  78. ul.steplist {
  79.     margin: 0;
  80.     padding: 0;
  81.     list-style-type: decimal;
  82. }
  83.  
  84. ul.steplist li {
  85.     margin: 0;
  86.     padding: 0;
  87.     font-size: 0.85em;
  88.     padding-right: 0.5em;
  89.     display: inline;
  90.     text-transform: uppercase;
  91. }
  92.  
  93. ul.steplist li.current {
  94.     font-weight: bold;
  95. }
  96.  
  97. ul.steplist a {
  98.     text-decoration: none;
  99. }
  100.  
  101. ul.plain {
  102.     list-style-type: none;
  103.     padding-left: 1.5em;
  104. }

Deseo convertir en responsive (que se oculte y expanda).
Dese se a partir de estos .css ya que es un sistema CMS que solo me permite trabajar con los estilos dados por el sistema.

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario