0

Wondering if anyone has a drop down menu solution that will work on mobile. The plan is to eventually redo this whole site to make it mobile friendly, but it's currently not and the drop downs aren't working on mobile. You can't select any of the links, parent or child. Live site can be seen at www.cabletv.com

Shortened version of HTML:

<ul id='nav'>
<li><a href='/digital-cable' id='tv'>TV</a>
    <ul>
        <li><a href='/comcast/cable-tv'>Comcast</a></li>
        <li><a href='/charter/cable-tv'>Charter</a></li>
        <li><a href='/cox/cable-tv'>Cox</a></li>
        <li><a href='/time-warner/cable-tv'>Time Warner</a></li>
    </ul>
</li>
<li><a href='/internet' id='internet'>Internet</a>
    <ul>
        <li><a href='/comcast/internet'>Comcast</a></li>
        <li><a href='/charter/internet'>Charter</a></li>
        <li><a href='/cox/internet'>Cox</a></li>
        <li><a href='/time-warner/internet'>Time Warner</a></li>
    </ul>
</li>
</ul>

CSS:

ul#nav{position: absolute; top: 0px; right: 0px;  margin: 0px; padding: 0px;}
ul#nav li {display: block; float: left; position: relative; margin: 0px; padding: 0px;}
ul#nav li a{display: block; float: left; height: 67px; font-size: 14px; text-transform: uppercase; color: #5d5d5d; text-decoration: none; padding: 13px 0px 0px; background: url(../images/cabletv/new/generic/nav-sprites.png) no-repeat 0px 0px; text-align: center; position: relative; border-top: 5px solid #fff;}

ul#nav li:hover{background-color: #f2f2f2;}
ul#nav li a:hover, ul#nav li:hover a {border-color: #f2f2f2;}

ul#nav,ul#nav li,ul#nav ul { list-style: none; margin: 0; padding: 0;}

ul#nav li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; position: relative;}

ul#nav li.hover,ul#nav li:hover { position: relative; z-index: 599; cursor: default;}

ul#nav ul { visibility: hidden; position: absolute; top: 100%; left: -40px; z-index: 598; width: 470px; background: rgba(255,255,255,0.9); -webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-left: 30px;}

ul#nav ul li { display: block; float: left;}
ul#nav ul li:hover{background: none;}
ul#nav ul li a, body._404 ul#nav ul li a{background: none; display: block; float: left; height: auto; padding: 15px 25px; text-transform: none; border: none;}
ul#nav ul li a:hover{background: none; color: #ff6947;}
ul#nav ul ul { top: 1px; left: 99%;}
ul#nav li:hover > ul { visibility: visible;}
ul#nav li.rtl ul { top: 100%; right: 0; left: auto;}
ul#nav li.rtl ul ul { top: 1px; right: 99%; left: auto;}
Molly Campbell
  • 339
  • 2
  • 6
  • 15
  • Have you thought of using :active instead of :hover to trigger the visibility/display attributes? – Shylo Hana Oct 16 '13 at 02:46
  • @ShyloHana I did try that - it didn't make a difference. Clicking on the nav item opens the drop down, but neither clicking the main nav item or any child items actually activates the link to the new page – Molly Campbell Oct 16 '13 at 02:54
  • This seems to be fairly well liked: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly – Shylo Hana Oct 16 '13 at 03:05
  • @ShyloHana I've been trying that one, the problem is that if you look at the drop downs on the live site, I need to make the submenu links to display horizontally instead of stacked, and I don't believe this will work with the way the osvaldas solution handles the mobile drop downs. – Molly Campbell Oct 16 '13 at 03:21
  • That sucks. Just looking at the "Related" links, this appears to be a commonly unanswered question. It's been something that's been appealing to me of late inasmuch as what to do if I ever want to make anything mobile friendly – Shylo Hana Oct 16 '13 at 03:29
  • This might be of some use to you: http://stackoverflow.com/questions/8330559/hover-effects-using-css3-touch-events/13080306#13080306 – Shylo Hana Oct 16 '13 at 03:34

1 Answers1

0

A really simple solution is to use a select menu for the mobile menu. Basically you have to replicate your menu using select tags rather than ul, hide it with display:none and then use media queries to display the appropriate menu depending on the user's device. You then need to add a little javascript to activate the links when they are selected. Check out http://css-tricks.com/convert-menu-to-dropdown/ for how to do it. It helped me immensely - admittedly not as pretty as a proper drop down menu, but works great for mobile devices!

Matt
  • 84
  • 5