elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ayuda con menú Desplegable!
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ayuda con menú Desplegable!  (Leído 1,923 veces)
ZedGe

Desconectado Desconectado

Mensajes: 154


Ver Perfil
Ayuda con menú Desplegable!
« en: 23 Mayo 2013, 02:15 am »

Estoy desarrollando una web en joomla 2.5, y tengo un modulo en html, que es el menu que esta a la derecha en la pagina http://puntografica3.net46.net/index.php/homepage#

El problema es que al poner sub menus, se despliega hacia la derecha, se puede hacer que abra para el otro lado??

Pongo los codigos por si las dudas

Este va en el head del index.php:
Código:
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">

Codigo HTML del menu
Código:
<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>


El css
Código:
/* Some stylesheet reset */
#cssmenu  > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* The container */
#cssmenu  > ul {
display: block;
position: relative;
width: 150px;
}

/* The list elements which contain the links */
#cssmenu  > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}

/* General link styling */
#cssmenu  > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #3a3a3a;
border-bottom: 1px dotted #1b1b1b;
padding: 11px 20px;
width: 110px;

/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 13px;
font-weight: 300;

/* Background & effects */
background: #282828;
}

/* Rounded corners for the first link of the menu/submenus */
#cssmenu  > ul li:first-child>a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}

/* Rounded corners for the last link of the menu/submenus */
#cssmenu  > ul li:last-child>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}


/* The hover state of the menu/submenu links */
#cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background: #54cdf1;
background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
border-color: transparent;
}

/* The arrow indicating a submenu */
#cssmenu  > ul .has-sub>a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}

/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu  > ul .has-sub>a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}

/* Changing the color of the arrow on hover */
#cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
border-left: 4px solid #fff;
}

#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
border-left: 4px solid rgba(0, 0, 0, .3);
}


/* THE SUBMENUS */
#cssmenu  > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu  > ul li:hover>ul {
top: 0px;
opacity: 1;
}



Gracias por la ayuda =D


En línea

Zeros1001

Desconectado Desconectado

Mensajes: 24


Ver Perfil
Re: Ayuda con menú Desplegable!
« Respuesta #1 en: 23 Mayo 2013, 15:04 pm »

Código:
[quote author=ZedGe link=topic=390817.msg1854577#msg1854577 date=1369268108]


/* THE SUBMENUS */
#cssmenu  > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu  > ul li:hover>ul {
top: 0px;
opacity: 1;
}



Gracias por la ayuda =D
[/quote]

ahí es donde está el problema creo yo.

Ves que lo posiciones a 150px de la izquierda (left) que es justo el ancho (width) que tienen los bloques del menú. Si quieres que se te posicione a la izquierda tienes que aplicarle width: -150px;


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Menu desplegable con Flash « 1 2 3 »
Diseño Gráfico
Azielito 22 11,403 Último mensaje 6 Julio 2004, 04:12 am
por Azielito
ayuda con menu desplegable
Diseño Gráfico
z3u2 2 2,178 Último mensaje 15 Noviembre 2005, 04:51 am
por z3u2
Menú desplegable HTML + CSS + JQuery (ayuda) « 1 2 »
Desarrollo Web
SanMagic 13 8,971 Último mensaje 26 Enero 2012, 05:35 am
por SanMagic
Menu desplegable con css y html
Desarrollo Web
WIитX 2 2,554 Último mensaje 14 Noviembre 2015, 18:08 pm
por WIитX
Menu desplegable
Desarrollo Web
Robocop8 1 2,125 Último mensaje 26 Agosto 2017, 02:54 am
por engel lex
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines