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;}
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!
Related
I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set ul li ul li to width 100%, it takes 100% of the overall container, not of the ul above it. I think because ul ul's are position absolute?
Any ideas how I can make the drop down menu's the same width as the parent list item?
The page can be seen here.
and here's the HTML
<ul>
<li><span aria-hidden="true" data-icon="a"> A long name here
<ul>
<li>View Profile</li>
<li>Edit Profile</li>
<li>Settings</li>
<li>My Payments</li>
</ul>
</li>
<li> <span aria-hidden="true" data-icon="c"> Online</li>
<li> Log Out</li>
</ul>
CSS
.head-link ul ul {
display: none;
}
.head-link ul li:hover > ul {
display: block;
}
.head-link ul {
list-style: none;
position: relative;
display: inline-table;
}
.head-link ul li {
float: left;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
height: 2em;
width: auto;
padding: 0.5em 0.98em;
}
.head-link ul li:hover {
background: #ffffff;
}
.head-link ul li:hover a {
color: #434343;
border-bottom: none;
}
.head-link ul li a {
display: block;
color: #ffffff;
text-decoration: none;
}
.head-link ul ul {
background: #ffffff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 99%;
left: 0;
text-align: left;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding-bottom: 0.8em;
padding-top: 0.5em;
box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3);
}
.head-link ul ul li {
float: none;
position: relative;
padding: 0em;
}
.head-link ul ul li a {
padding: 0.5em 1.24em;
color: #434343;
border-bottom-left-radius: 0.5em;
border-bottom-right-radius: 0.5em;
}
.head-link ul ul li a:hover {
background: #ffffff;
text-decoration: underline;
}
.head-link ul ul ul {
position: absolute;
left: 100%;
top:0;
}
Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}
Problem: Why when i go with the mouse over "About" the sub-menu appears but if i try to go into any of it items it disappears?
Part of my style.css:
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #ffffff;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu a:hover{
color: #136F6F;
}
#menu ul {
list-style: none;
text-align: center;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
position: relative;
list-style: none;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul li:hover ul{
visibility:visible;
}
#menu ul ul{
position: absolute;
top: 35px;
visibility: hidden;
}
#menu ul ul li{
position: relative;
float: left;
margin: 0;
padding:0;
}
#menu ul ul li a{
display: block;
text-decoration:none;
text-align: center;
height: 55px;
line-height: 55px;
width: 200px;
background-color: #209D9D;
color: white;
}
#wrapper {
position: relative;
width: 980px;
margin: 75px auto 0 auto;
background: #FFFFFF;
}
Part of my index.html:
<div id="wrapper">
<div id="menu">
<ul>
<li class="first current_page_item">Homepage</li>
<li>Blog</li>
<li>Papers</li>
<li>Projects</li>
<li>About
<ul>
<li>Me</li>
<li>Curriculum Vitae</li>
<li>Contact Me</li>
</ul>
</li>
<!-- <li class="last">Contact</li> -->
</ul>
<br class="clearfix" />
</div>
There is a gap between your menu and submenu, when your cursor goes over this gap, the submenu disappears, try changing "top: 35px;" in "#menu ul ul" to "top: 20px;"
Change padding of #menu ul li to padding: 20px;
Play around the values.
Live demo
EDIT
Instead of changing the li's padding, I had added below css:
#menu ul li a {
padding:20px 0;
}
#menu ul ul li a {
padding: 0;
}
Demo Here
Try it.
SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}
You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.
I have been struggling with this code for quite a few hours now and I have been unable to fix it. This is my CSS for my horizontal navigation:
#topmenu {
position: relative;
width: 690px;
left: 270px;
top: 11px;
}
#nav {
padding: 0px;
margin: 0px;
float: left;
}
#nav li {
float: left;
position: relative;
list-style: none;
margin: 0px;
margin-right: 6px;
}
#nav li ul {
display: none;
margin: -1em 0 0 -3em;
padding: 1em;
padding-top: 1.2em;
position: absolute;
top: 24px;
z-index: 500;
opacity: 0.96;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
display: block;
clear: both;
}
#nav li ul li a {
border-radius: 0px;
width: 125px;
font-size: 11px;
padding-left: 25px;
padding-right: 0px;
padding-bottom: 5px;
}
#nav li ul li span {
float: left;
color: #FFF;
font-size: 14px;
text-decoration: none;
font-weight: bold;
display: block;
background: #6AC1F3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 0px;
width: 145px;
}
#nav a {
float: left;
color: #FFF;
font-size: 13px;
text-decoration: none;
display: block;
background: #6AC1F3;
padding: 5px 25px 5px 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-top-left-radius: 10px;
-webkit-top-right-radius: 10px;
}
#nav a:hover, #nav a.selected {
background-color: #FEA14F;
}
And this is my HTML code:
<div id="topmenu">
<ul id="nav">
<li><a class="rounded" href="index.html">Home</a></li>
<li><a class="rounded" href="about-us.htm">About Us</a></li>
<li><a class="rounded" href="contact.htm">Contact</a></li>
<li><a class="rounded" href="#">Services</a>
<ul>
<li><span>Manage</span></li>
<li>IT Management</li>
<li>Helpdesk Support</li>
<li>Planning and Consulting</li>
<li><span>Instruct</span></li>
<li>Software Training</li>
<li>Custom Curriculum</li>
<li>Social Networking</li>
<li><span>Grow</span></li>
<li>Website Design</li>
<li>Website Optimization</li>
<li>Internet Marketing</li>
<li><span>Secure</span></li>
<li>Remote Back Up</li>
<li>Scanning and Storage</li>
<li>Spam and Virus Protection</li>
</ul>
</li>
<li><a class="rounded" href="products.htm">Products</a></li>
<li><a class="rounded" href="real-estate-solutions.htm">Real Estate Solutions</a></li>
</ul>
</div>
The code works in Firefox, Chrome, but I am unable to make it work for IE. I have created additional rules for IE:
body {
behavior: url(csshover.htc);
}
#topmenu {
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
But all the menu does is display the drop-down, but when I try to select an item in the drop-down menu, the menu disappears.
What's the issue?
I see that you've mostly figured this out. You can use a semi transparent png to get the 96% opacity effect.
Alternatively you can use jquery's opacity, which i think is cross browser...
from my experience removing the filter isn't enough. the main problem is that IE li's don't extend to create one uninterrupted sequence, thus leaving empty spaces which aren't covered by the :hover rule, consequently causing the sub-menu to disappear.
the solution is to add a background color or image to the submenu's li and the triggering top menu li, in order to create a continuous sequence of li elements, with no spaces. (transparent background color won't work). if you don't want a background color applied simply add a 1pxX1px transparent PNG background image instead.
hope you find this helpful.
Below is the css for my menu
#menu
{
position: absolute;
left: 170px;
top: 92px;
background: #336699;
float: left;
z-index:50;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 9em;
float: left;
}
#menu a, #menu h2
{
font: bold 11px/20px arial, helvetica, sans-serif;
display: block;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 4px 3px;
}
#menu h2
{
color: #fff;
background: #336699;
text-transform: uppercase;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
}
#menu a
{
color: #fff;
background: #79A3CF;
text-decoration: none;
}
#menu a:hover
{
color: #a00;
background: #fff;
}
#menu li
{
position: relative;
}
#menu li ul li
{
position: relative;
width: 12em;
}
#menu ul ul
{
position: absolute;
z-index: 500;
}
#menu ul ul ul
{
position: absolute;
top: 0;
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;
}
Here is my html design for the menu. It is a horizontal menu with dropdown submenus
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>
</li>
<li>submitem</li>
<li>submitem</li>
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>
</li>
</ul>
</div>
I am using the minified version of the whatever hover script. Checked few posts here on this issue but couldn't solve the problem. The submenus are not appearing on IE6 and IE7. I trid adding
<!--[if lt IE 8]>
but no results...
Your HTML is poorly formed. ** indicates additions.
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>**</ul>**
</li>
<li>submitem</li>
<li>submitem</li>
**</ul>**
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>**</ul>**
</li>
</ul>
</div>
One good way to check for poorly formed html and other html problems is to validate your html in the w3c validator here.By using the validator to make sure my html is compliant, I can usually weed out browser discrepancies issues pretty easily.