Foros del Web » Creando para Internet » CSS »

Menu Desplegable hacia arriba

 Estas en el tema de Menu Desplegable hacia arriba en el foro de CSS en Foros del Web. Buen Dia, estoy realizando un proyecto donde se requiere un menu desplegable hacia arriba, eh tratado con este http://www.forosdelweb.com/f53/menu-...00-css-595007/ pero existen un problema manejo backgrounds ...
  #1 (permalink)  
Antiguo 15/05/2013, 11:43
Avatar de skardo  
Fecha de Ingreso: febrero-2013
Ubicación: Lima
Mensajes: 68
Antigüedad: 11 años, 2 meses
Puntos: 1
Menu Desplegable hacia arriba
Buen Dia, estoy realizando un proyecto donde se requiere un menu desplegable hacia arriba, eh tratado con este http://www.forosdelweb.com/f53/menu-...00-css-595007/ pero existen un problema manejo backgrounds transparentes y este me duplica todo asi que caso perdido,

existe algo que pueda añádorñe a este css para que se liste de modo hacia arriba?


http://taklab.com/clientes/llama/menu.html

el codigo es muy similar al otro que me duplica backgrounds pero no encuentro por donde lo lista para arriba

css

Código CSS: 
Ver original
  1. .ddsmoothmenu{
  2. width: 100%; 
  3. }
  4.  
  5. .ddsmoothmenu ul{
  6. z-index:100;
  7. margin: 0;
  8. padding: 0;
  9. list-style-type: none;
  10. float:right;
  11. text-transform: uppercase;
  12. /*line-height:75px;   */   
  13. }
  14.  
  15. /*Top level list items*/
  16. .ddsmoothmenu ul li{
  17. position: relative;
  18. display: inline;
  19. float: left; 
  20. margin: 0px 20px 0 20px;
  21.             
  22. }
  23.  
  24. /*Top level menu link items style*/
  25. .ddsmoothmenu ul li a{
  26. display: block;
  27. /*background: #414141; /*background of menu items (default state)*/
  28. color: white;
  29. /*padding: 8px 10px;  
  30. border-right: 1px solid #778; */  
  31. text-decoration: none;
  32. }
  33.  
  34. * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
  35. display: inline-block;    ;        
  36. }
  37.  
  38. .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
  39. color: white;
  40. }
  41.  
  42. .ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
  43. background: transparent;        
  44. color: white;
  45. }
  46.  
  47. .ddsmoothmenu ul li a:hover{
  48. background: transparent;  /*background of menu items during onmouseover (hover state)*/
  49. color: #00E1BF;
  50. }
  51.     
  52. /*1st sub level menu*/
  53. .ddsmoothmenu ul li ul{     
  54. position: absolute;
  55. left: 0; 
  56. display: none; /*collapse all sub menus to begin with*/
  57. visibility: hidden;       
  58. }
  59.  
  60. /*Sub level menu list items (undo style from Top level List Items)*/
  61. .ddsmoothmenu ul li ul li{
  62. display: list-item;
  63. float: none;   
  64. }
  65.  
  66. /*All subsequent sub menu levels vertical offset after 1st level sub menu */
  67. .ddsmoothmenu ul li ul li ul{
  68. top: 0;   
  69. }
  70.  
  71. /* Sub level menu links style */
  72. .ddsmoothmenu ul li ul li a{
  73. font: normal 13px Verdana;
  74. width: 160px; /*width of sub menus*/
  75. padding: 5px;
  76. margin: 0;
  77. border-top-width: 0;
  78. border-bottom: 1px solid gray;
  79. background-image: url('../img/index_menu_background.png');  
  80. }
  81.  
  82. /* Holly Hack for IE \*/
  83. * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
  84.  
  85.  
  86. /* ######### CSS classes applied to down and right arrow images  ######### */
  87.  
  88. .downarrowclass{
  89. position: absolute;
  90. top: 12px;
  91. right: 7px;
  92. }
  93.  
  94. .rightarrowclass{
  95. position: absolute;
  96. top: 6px;
  97. right: 5px;
  98. }
  99.  
  100. /* ######### CSS for shadow added to sub menus  ######### */
  101.  
  102. .ddshadow{ /*shadow for NON CSS3 capable browsers*/
  103. position: absolute;
  104. left: 0;
  105. top: 0;
  106. width: 0;
  107. height: 0;
  108. background: silver;
  109. }
  110.  
  111. .toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
  112. opacity: 0.8;
  113. }

y este es mi html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es-ES">
  3.  
  4.     <head> 
  5.         <title>Llama</title> 
  6.         <!-- favicon -->
  7.         <link rel="shortcut icon" href="favicon.ico" />     
  8.         <!-- metatags -->
  9.         <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  10.     <meta http-equiv="Content-Type" content="text/html; " />
  11.         <link rel="stylesheet" media="screen" href="css/estilos.css" />
  12.     
  13.     <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
  14.     
  15.     <script type="text/javascript" src="js/jquery.min.js"></script>
  16.     <script type="text/javascript" src="js/ddsmoothmenu.js">
  17.     /***********************************************
  18.      *Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  19.      *This notice MUST stay intact for legal use
  20.      *Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
  21.     ***********************************************/
  22.     </script>
  23.     
  24.     <script type="text/javascript">
  25.     
  26.     ddsmoothmenu.init({
  27.     mainmenuid: "smoothmenu1", //menu DIV id
  28.     orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
  29.     classname: 'ddsmoothmenu', //class added to menu's outer DIV
  30.     //customtheme: ["#1c5a80", "#18374a"],
  31.     contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
  32.     })
  33.     
  34.     ddsmoothmenu.init({
  35.     mainmenuid: "smoothmenu2", //Menu DIV id
  36.     orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
  37.     classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
  38.     //customtheme: ["#804000", "#482400"],
  39.     contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
  40.     })
  41.     
  42.     </script>
  43.     </head> 
  44.     
  45.     <body> 
  46.        
  47.         <div class="contenedor">
  48.              <iframe name="I1" marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="0"  src="index_default.html">
  49.              El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.
  50.              </iframe>
  51.         </div>
  52.         
  53.         <div class="menu">
  54.             
  55.             <a target="I1" href="index_default.html"><img src="img/logo_llama.png"/></a>
  56.             
  57.             <div id="smoothmenu1" class="ddsmoothmenu">
  58.             <ul>
  59.                 <li><a target="I1" href="index_story.html">Story</a></li>
  60.                 <li><a href="">us</a></li>
  61.                 <li><a href="">practice</a></li>
  62.                 <li><a href="#">theory + publications</a>
  63.                     <ul>
  64.                     <li><a href="#">Sub Item 2.1</a></li>
  65.                     <li><a href="#">Folder 2.1</a>
  66.                         <ul>
  67.                         <li><a href="#">Sub Item 2.1.1</a></li>
  68.                         <li><a href="#">Sub Item 2.1.2</a></li>
  69.                         <li><a href="#">Folder 3.1.1</a>
  70.                                 <ul>
  71.                                 <li><a href="#">Sub Item 3.1.1.1</a></li>
  72.                                 <li><a href="#">Sub Item 3.1.1.2</a></li>
  73.                                 <li><a href="#">Sub Item 3.1.1.3</a></li>
  74.                                 <li><a href="#">Sub Item 3.1.1.4</a></li>
  75.                                 <li><a href="#">Sub Item 3.1.1.5</a></li>
  76.                                 </ul>
  77.                        </li>
  78.                        <li><a href="#">Sub Item 2.1.4</a></li>
  79.                        </ul>
  80.                   </li>
  81.                   </ul>
  82.               </li>
  83.               <li><a href="">recognition</a></li>
  84.         </div>
  85.         
  86.         </div>
  87. </body> 
  88. </html>

porfavor pueden ayudarme
  #2 (permalink)  
Antiguo 16/05/2013, 04:19
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Menu Desplegable hacia arriba
¿Lo estás haciendo con JavaScript?

Etiquetas: arriba, color, desplegable, hacia, hover, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:13.