homepage Welcome to WebmasterWorld Guest from 54.196.120.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
@media for dropdown menu
helenp




msg:4431526
 10:03 pm on Mar 20, 2012 (gmt 0)

Hi,
I am trying to serve the hover dropdown menu without the dropdown for mobiles and tablets, and I am trying to do it using @media.
What I want is to display only the buttons with a link to a new page for mobiles and tablets with resolucion lower than 1023. But I want the menu with its dropdown served for normal pcs, higher than 1024.

The menu works perfect in my samsung mini, however with
blackberry the menus are all open when entering page. Also with Adobe device center most of the mobiles have the menu open

Well this is what I got so far,
the css for the menu:
@media screen and (max-width: 1023px){
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: none;}
}
#menu {float:left; margin:0; padding:0 5px 0 5px; width:778px }
#menu ul {list-style: none; margin:0; padding:0; width:108px; float:left;}
#menu ul ul ul .level3{ width: 330px; }
#menu ul ul .level4{ width:240px;}
#menu ul ul .level5{ width:220px;}
#menu ul ul .level6{ width:195px;}
#menu ul ul .level7{ width:113px;}
#menu ul ul .level2{ display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099;
background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold;
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:250px;}
#menu p {display: block; border: 1px solid; border-color: #ccc #888 #555 #bbb; margin:0; padding:2px 3px; color:#000099;
text-align:center; background:url("../images/background5.gif"); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px;
font-weight:bold;}
#menu a{display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; background:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px;
padding-bottom:3px; text-decoration:none;}
#menu a.links{display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; background:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px;
padding-bottom:3px; text-decoration:none;}
#menu a.topmenu{text-decoration:none;}
#menu a.topmenu:hover {color:#000099; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a.links:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;}
#menu ul ul {position:absolute;}
@media screen and (min-width: 1024px){
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;} }


And a small part of the html:
<ul>
<li>
<p><a class="topmenu" href="indextest.htm">Inicio&nbsp;<img src="new_arrow_down.gif" width="8" height="8" alt="Arrow down" border="0"></a></p>
<ul>
<li><a class="links" href="indextest.htm">Página de Inicio</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<p><a class="topmenu" href="nosotros_links.htm">Nosotros&nbsp;<img src="new_arrow_down.gif" width="8" height="8" alt="Arrow down" border="0"></a></p>
<ul>
<li class="level4"><a class="links" href="libro_de_visitas_2011.htm">Consejos y comentarios de veraneantes</a></li>
<li class="level4"><a class="links" href="nosotros.htm">Sobre nosotros</a></li>
<li class="level4"><a class="links" href="pacos_pros.htm">Pacos Pros, empresa de mantenimiento</a></li>


Any ideas?
Thanks,

 

helenp




msg:4431649
 8:44 am on Mar 21, 2012 (gmt 0)

Dont get it, I did it correct but some mobile dont apply the rule,
editing the css in the brower, only changing this part make the dropdown menu not to display, only the buttons with its link:
@media screen and (min-width: 1024px){
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;} }
Changing the last line to display:none takes away the dropdown, but how to add this to screentouches, such as mobiles, tablets etc?
Thanks,

helenp




msg:4431652
 8:53 am on Mar 21, 2012 (gmt 0)

wow, how stupid I am,
some devices dont understand hover, and what I am putting display none is on a hover....

Here I added the ul ul and ul ul ul and ul ul li
without the hover and it still does not work as per adobe advice central....any ideas:
div#menu ul ul {display:none;}
#menu ul ul {display:none;}
#menu ul ul li {display:none;}
#menu ul ul ul {top:-1px; left:100%; display:none;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display:none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display:none;}

helenp




msg:4431658
 9:26 am on Mar 21, 2012 (gmt 0)

I added the style for the toplevel into @meda screen both for pc and touchscreens, and the toplevel appeared without any style on the problem mobiles...blackberry, some iphones and many others, except my dear samsung mini :)

So they does not read this:
@media screen and (max-width: 1023px) { style }

What can I do? Dont want to have separat style sheets.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved