Solved

Problems converting pure CSS responsive menu for mobile

Posted on 2016-09-15
23
132 Views
Last Modified: 2016-09-19
I have existing pure CSS menu for the desktop which expands from left to right when hover.

HTML:

<nav id="nav">
  <a href="#nav" title="Show navigation"></a>
  <a href="#" title="Hide navigation"></a>
  <ul class="dropdown dropdown-vertical">
    <span class="clearfix">
        <li class="dir">ITEM 1
            <ul>
                <li class="dir">SUB ITEM 1
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
                <li class="dir">SUB ITEM 2
                    <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="dir"><a href="">ITEM 2</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir"><a href="/dev/tradeshows.htm">ITEM 3</a>
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li class="dir">ITEM 4
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li><a href="">ITEM 5</a></li>
        <li class="dir">ITEM 6
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>          
            </ul>
        </li>
        <li><a href="">ITEM 6</a></li>
        <li class="dir">ITEM 7
            <ul>
                        <li><a href="">SUB MENU 1</a></li>
                        <li><a href="">SUB MENU 2</a></li>
            </ul>
        </li>
        <li><a href="">ITEM 8</a></li>
            </span>
  </ul>
</nav>

Open in new window


CSS:

@charset "UTF-8";
body {
  padding: 1.25em;
  /* 20 */
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.dropdown {
  position: relative;
  z-index: 597;
  float: left;
}

ul.dropdown li {
  float: left;
  line-height: 1.3em;
  vertical-align: middle;
  zoom: 1;
}

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

ul.dropdown ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

ul.dropdown ul li {
  float: none;
}

ul.dropdown ul ul {
  top: 0px;
  left: 99%;
}

ul.dropdown li:hover > ul {
  visibility: visible;
}

ul.dropdown-vertical {
  width: 110px;
}

ul.dropdown-vertical ul {
  top: 0px;
  left: 99%;
}

ul.dropdown-vertical li {
  float: none;
}

ul.dropdown {
  font-weight: normal;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}

ul.dropdown li {
  padding: 4px 5px;
  border-style: solid;
  border-width: 0px 0px 1px 0;
  border-color: #fff #d9d9d9 #d9d9d9;
  background-color: #ffffff;
  color: #000;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
  background-color: #eee;
  color: #000;
}

ul.dropdown a:link,
ul.dropdown a:visited {
  color: #000;
  text-decoration: none;
}

ul.dropdown a:hover {
  color: #000;
}

ul.dropdown a:active {
  color: #ffa500;
}


/* -- level mark -- */

ul.dropdown ul {
  width: 110px;
  margin-top: 0px;
}

ul.dropdown ul li {
  font-weight: normal;
}


/*-------------------------------------------------/
 * @section     Support Class `dir`
 * @level sep   ul, .class
 */

ul.dropdown *.dir {
  padding-right: 15px;
  background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-horizontal ul *.dir {
  padding-right: 10px;
  background-image: url(https://www.thesnowpros.org/DesktopModules/CISS.SideMenu/styles/BrandonTab/css/dropdown/themes/default/images/nav-arrow-right.png);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

Open in new window


I tried to change it so that the left-to-right menu will become Accordion menu going down in mobile mode.

/* for mobile devices */

@media only screen and ( max-width: 40em)
/* 640 */

{
  html {
    font-size: 75%;
    /* 12 */
  }
  #nav > a {
    display: none;
    }
  #nav {
    position: relative;
    top: auto;
    left: auto;
  }
  #nav > a {
    width: 3.125em;
    /* 50 */
    height: 3.125em;
    /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #000;
    position: relative;
  }
  #nav > a:before,
  #nav > a:after {
    position: absolute;
    border: 2px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
  }
  #nav > a:after {
    top: 60%;
  }
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level */
  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
  }
  #nav > ul > li {
    width: 100%;
    float: none;
  }
  #nav > ul > li > a {
    height: auto;
    text-align: left;
    padding: 0 0.833em;
    /* 20 (24) */
  }
  #nav > ul > li:not(:last-child) > a {
    border-right: none;
    border-bottom: 1px solid #cc470d;
  }
  /* second level */
  #nav li ul {
    position: static;
    padding: 1.25em;
    /* 20 */
    padding-top: 0;
  }
}

Open in new window


I used this as a base but was not able to make it work properly.

My attempt is shown in this fiddle. To see the mobile version, resize the window. The issue is:

  • all the menu and sub-menus expanded when click on the icon instead of showing when selected

I have tried many ways but can't seems to get it to work properly. Any help or suggestion is much appreciated.
0
Comment
Question by:Jack
  • 14
  • 8
23 Comments
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41800586
Try removing position: static; on line 223.
  #nav li ul {
    position: static;    /* remove this line or change to absolute */
    padding: 1.25em;
    /* 20 */
    padding-top: 0;
  }

Open in new window

0
 

Author Comment

by:Jack
ID: 41800605
Hi Kim, that only made the menu the same as the desktop version.  I need to make the menu becoming Accordion in mobile mode.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41800701
If I understand correctly what accordion is, it will be difficult to do in pure css. Accordion menus rely on click events to expand. The only way I know to do that would be to hide a checkbox in each menu item and then use the :clicked pseudo selector in CSS the way CSS sprites are used to customize checkboxes or you could make each menu subcategory a link and use the :target pseudo selector the way the show menu icon is. Either way, this is going to require a rework of your HTML.
0
 

Author Comment

by:Jack
ID: 41800730
Hi Kim, did you get a chance to look at http://codepen.io/massiebn/pen/KrJvi

It is done without javascript.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41800806
Have you tried that codepen page on a mobile device? I tried it on my android phone and it would never expand the sub-submenus except for a split second as it was navigating to the link in the submenu.

It relies on the hover state which doesn't exist in the touchscreen realm. However, a tap triggers the hover state on a touchscreen device. The problem is that same tap triggers the click event which in this case activates the link. If the submenu categories do not have links as your sample does not, we may be able to overcome that.

What troubles me is that, at least in my experience, triggering the hover state with a touchscreen tap is not always reliable.

Give me a little while to ponder this. In the meantime, there may be other experts who have more experience with this who will offer advice.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41800844
I was wrong. It appears that some of your submenu categories are links and some are not. This is good because you can see how it works in some places and doesn't in others. The fix is quite simple. Add the property display: none; to your #nav li ul rule in the section you've labeled second level and add one new property for the hover state.
	/* second level */
	#nav li ul {
		position: static;
		padding: 1.25em;
		/* 20 */
		padding-top: 0;
		display: none;	/* new property here */
	}
	/* NEW RULE HERE */
	#nav ul.dropdown li:hover > ul {
		display: block;
	}

Open in new window

This should work on your mobile devices for Item 1 and its subcategories. But it will not work for Item 2 where even the top level is a link. If it is necessary for these upper level menu items to be links, we will have to come up with an alternative solution which may include javascript.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41800858
It appears that it does work on the linked subcategory items if you click to the right of the words in the clear space. Just not if you click on the menu item words themselves. It might be worthwhile to include an arrow to tap on to expand the menu in the clear space to the right of the menu text instead of using the entire <li> element.

By the way, if you view your fiddle on a touchscreen device with a screen wider than 640 pixels, you will see that even your desktop version of the menu has these problems on touchscreen devices.

I'd also like to point out that the span element with the class clearfix in your fiddle is improper. The only element that can be a direct descendant of the <ul> element is an <li> element.
0
 

Author Comment

by:Jack
ID: 41800936
Thanks Kim.  The site where I got the arrow was offline.  I have added the arrow from another site so now it's showing.

I have updated the fiddle https://jsfiddle.net/u2k50dkv/10/ with your suggestions  but it seems not working properly or look weird:

When selected ITEM 1 -
  • the right arrow for Item 1 is off to the center, instead of remaining on right of ITEM 1
  • there is a line display after expanding ITEM 1 right below SUB ITEM 2
  • the arrow for SUB ITEM 1 disappeared when I select it
  • SUB ITEM 1 and SUB ITEM 2 background should be all white and their arrow should be all the way to the right showing that there is another level, but it seems that there is a "border"
  • similarly if I extend SUB ITEM 1, the SUB MENU 1 and SUB MENU 2 background is showing half grey half white rather than all white
  • if I select SUB ITEM 2 there are now 2 line spaces showing below SUB MENU 2

I am not clear about the clearfix.  If I remove it, it will display an underline on the menu.  Not sure how to fix it but it doesn't seems to cause any problem.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41801005
the right arrow for Item 1 is off to the center, instead of remaining on right of ITEM 1
This is because of the 50% vertical positioning of the arrow. When the submenu becomes visible, the <li> element expands vertically, causing 50% vertical position to move downward. You will have to change the vertical position to about 10px (line 136).
background-position: 100% 10px;

Open in new window

there is a line display after expanding ITEM 1 right below SUB ITEM 2
Are you referring to the line at the bottom of the white space around SUB ITEM 2 or are you referring to the extra space between that line and the line above ITEM 2? That space is being generated by the 1.25em padding at the bottom of rule #nav ul li (line 224) and the 4px padding at the bottom of rule ul.dropdown li from the desktop style properties (padding-bottom: 0; will need to be added to the mobile media query rule on line 235)
  #nav li ul {
    position: static;
    padding: 0 1.25em;            /* line 224 */
    /* 20 */
    display: none;	
  }
...
ul.dropdown li{                   /* line 235 */
line-height: 2.3em;
padding-bottom: 0;
}

Open in new window

the arrow for SUB ITEM 1 disappeared when I select it
It actually moved down behind the sub menu items. Changing the vertical positioning of the arrow in the first point above will fix this too.
SUB ITEM 1 and SUB ITEM 2 background should be all white and their arrow should be all the way to the right showing that there is another level, but it seems that there is a "border"
This is caused by the 1.25em right padding of the rule #nav li ul (line 224 again) and the width of 110px in rule ul.dropdown ul from the desktop style rules (a new rule will need to be added to the mobile media query to override this width to 100%)
  #nav li ul {
    position: static;
    padding: 0 0 0 1.25em;                  /* line 224 */
    /* 20 */
    display: none;	
  }
...
ul.dropdown ul{                             /* new rule, line 238 */
  width: 100%;
}

Open in new window

similarly if I extend SUB ITEM 1, the SUB MENU 1 and SUB MENU 2 background is showing half grey half white rather than all white
I'm not seeing this. Can you post a screen capture?
if I select SUB ITEM 2 there are now 2 line spaces showing below SUB MENU 2
This is all that extra padding from the second item above. When those are eliminated, this will be eliminated too.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41801023
I am not clear about the clearfix.  If I remove it, it will display an underline on the menu.  Not sure how to fix it but it doesn't seems to cause any problem.
True it doesn't cause any problems today because the browser forgives the infraction...today. But at some point in the future, probably not soon, that forgiveness could be exhausted.

What's causing this, though, are a couple of obscure rules in your CSS that don't appear to apply to your code. These rules are on lines 211 and 217. Removing these rules will eliminate the extra space on the left and the red underline below the links.
  #nav > ul > li > a {                         /* line 211 */
    height: auto;
    text-align: left;
    padding: 0 0.833em;
    /* 20 (24) */
  }
  #nav > ul > li:not(:last-child) > a {        /* line 217 */
    border-right: none;
    border-bottom: 1px solid #cc470d;
  }

Open in new window

0
 

Author Comment

by:Jack
ID: 41801731
Thanks Kim!   It works good.   This is the updated fiddle https://jsfiddle.net/u2k50dkv/13/

I noticed ITEM 5, 7 and 9 are shorter.

I am attaching the screen shot what I mean.  When the SUB ITEM 1 or SUB MENU are not selected, they shall all have white background all the way, but it is showing leading grey color spaces.

One other dumb question.  How do I make the "hamburger menu" icon into 3 bars instead of the current 2?

screen showing leading grey color
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 21

Expert Comment

by:Kim Walker
ID: 41801967
I see what you mean now. These are the padding properties of the parent affecting the position of the child. The <ul> tags are aligned with the text above it and have padding properties of their own that generate the indents. It may be necessary to remove the padding from the <li> elements and use text-indent to offset the words from the left margin. This will take some more deep thought. I'll be back this evening with a suggestion.
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41803304
Here is what I've come up with. You may not like it, though, after you see it.
  1. I added a white background to the top <ul> on line 194. In retrospect, this may not have been necessary.
  2. I changed the <ul> padding to zero on line 212.
  3. I added a white border to the top of the <ul> for separation on line 214.
  4. I added a padding-bottom to nested <ul>s for more separation on line 218.
  5. I increased the width to offset the loss of padding on line 233.
  6. I removed left and right padding and added a text-indent on line 236.
  7. I increased that text-indent for 2nd generation <li>s on line 242.
  8. I increased that text-indent further for 3rd generation <li>s on line 246.
One of the problems with this approach is that incremental padding can't be used to indent the category sub-levels. So a fixed indent must be created for each expected sub-level.

Personally, I would prefer the previous gray indent area with an added white line between items. I think that would more obviously indicate the sub-level.

I'm including my code here for future knowledge base searches.
HTML
<nav id="nav">
	<a href="#nav" title="Show navigation"></a>
	<a href="#" title="Hide navigation"></a>
	<ul class="dropdown dropdown-vertical">
	
		<li class="dir">ITEM 1
		<ul>
			<li class="dir">SUB ITEM 1
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>
			</ul>
			</li>
			<li class="dir">SUB ITEM 2
				<ul>
					<li><a href="">SUB MENU 1</a></li>
					<li><a href="">SUB MENU 2</a></li>
				</ul>
			</li>
			</ul>
		</li>
		<li class="dir"><a href="">ITEM 2</a>
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>
			</ul>
		</li>
		<li class="dir"><a href="/dev/tradeshows.htm">ITEM 3</a>
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>
			</ul>
		</li>
		<li class="dir">ITEM 4
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>
			</ul>
		</li>
		<li><a href="">ITEM 5</a></li>
		<li class="dir">ITEM 6
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>			
			</ul>
		</li>
		<li><a href="">ITEM 7</a></li>
		<li class="dir">ITEM 8
			<ul>
				<li><a href="">SUB MENU 1</a></li>
				<li><a href="">SUB MENU 2</a></li>
			</ul>
		</li>
		<li><a href="">ITEM 9</a></li>
	
	</ul>
</nav>

Open in new window

CSS
@charset "UTF-8";
body {
  padding: 10px;
  /* 20 */
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.dropdown {
  position: relative;
  z-index: 597;
  float: left;
}

ul.dropdown li {
  float: left;
  line-height: 1.3em;
  vertical-align: middle;
  zoom: 1;
}

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

ul.dropdown ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

ul.dropdown ul li {
  float: none;
}

ul.dropdown ul ul {
  top: 0px;
  left: 99%;
}

ul.dropdown li:hover > ul {
  visibility: visible;
}

ul.dropdown-vertical {
  width: 110px;
}

ul.dropdown-vertical ul {
  top: 0px;
  left: 99%;
}

ul.dropdown-vertical li {
  float: none;
}

ul.dropdown {
  font-weight: normal;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}

ul.dropdown li {
  padding: 4px 5px;
  border-style: solid;
  border-width: 0px 0px 1px 0;
  border-color: #fff #d9d9d9 #d9d9d9;
  background-color: #ffffff;
  color: #000;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
  background-color: #eee;
  color: #000;
}

ul.dropdown a:link,
ul.dropdown a:visited {
  color: #000;
  text-decoration: none;
}

ul.dropdown a:hover {
  color: #000;
}

ul.dropdown a:active {
  color: #ffa500;
}


/* -- level mark -- */

ul.dropdown ul {
  width: 110px;
  margin-top: 0px;
}

ul.dropdown ul li {
  font-weight: normal;
}


/*-------------------------------------------------/
 * @section		Support Class `dir`
 * @level sep	ul, .class
 */

ul.dropdown *.dir {
  padding-right: 15px;
  background-image: url(http://www.radiancehospital.com/images/nav-arrow-right.png);
  background-position: 100% 50%;
  background-repeat: no-repeat;
}


/* -- Components override -- */

ul.dropdown-vertical .dir{
  background-image: url(http://www.radiancehospital.com/images/nav-arrow-right.png);
  background-position: 100% 50%;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}


/* for mobile devices */
@media only screen and (max-width: 40em)
/* 640 */
{
  html {
    font-size: 75%;
    /* 12 */
  }
  #nav > a {
    display: none;
  }
  #nav {
    position: relative;
    top: auto;
    left: auto;
    margin-top: -20px;
    padding-top: 20px;
  }
  #nav > a {
    width: 3.125em;
    /* 50 */
    height: 3.125em;
    /* 50 */
    text-align: left;
    text-indent: -9999px;
    background-color: #000;
    position: relative;
  }
  #nav > a:before,
  #nav > a:after {
    position: absolute;
    border: 1px solid #fff;
    top: 35%;
    left: 25%;
    right: 25%;
    content: '';
  }
  #nav > a:after {
    top: 60%;
  }
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
  }
  /* first level */
  #nav > ul {
    background-color: #FFF;		/* added white background */
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
  }
  #nav:target > ul {
    display: block;
  }
  #nav > ul > li {
    width: 100%;
    float: none;
  }

  /* second level */
  #nav li ul {
    position: static;
    padding: 0;					/* changed to zero */
    display: none;
    border-top: solid 1px #FFF;	/* added border-top */
  }
  #nav ul.dropdown li:hover > ul {
    display: block;
    padding-bottom: 1px;		/* added padding-bottom */
  }
  ul.dropdown *.dir {
    background-position: 100% 10px;
  }
  ul.dropdown-vertical .dir{
    background-position: 100% 10px;
  }
  ul.dropdown-vertical ul{
    width: 100%;
  }
  ul.dropdown li{
    line-height: 2.3em;
    padding-bottom: 0;
  }
  ul.dropdown-vertical {		/* added new rule */
      width: 119px;
  }
  ul.dropdown-vertical li,		/* added new rule */
  ul.dropdown-vertical .dir {
    padding-right: 0;
    padding-left: 0;
    text-indent: 4px;
  }
  ul.dropdown-vertical li li,	/* added new rule */
  ul.dropdown-vertical li .dir {
    text-indent: calc(1.25em + 4px);
  }
  ul.dropdown-vertical li li li,	/* added new rule */
  ul.dropdown-vertical li li .dir {
    text-indent: calc(2.5em + 4px);
  }
}

Open in new window

0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41803308
Re: adding a third patty to the hamburger icon. I believe the triple-hamburger icon is represented with an image. The double-hamburger icon you have in your code is pure CSS. One patty is generated with a ::before content insertion selector and the other is generated with an ::after content insertion selector. It might be difficult to add a third.
0
 
LVL 42

Expert Comment

by:David S.
ID: 41803376
To add a third line to the icon, add a <span> to the links (and adjust the styles as needed). Also it's best to use more than the title attribute to provide text for an element. When you don't want to have text inside the element, use the "aria-label" attribute.

	<a href="#nav" title="Show navigation" aria-label="Show navigation"><span></span></a>
	<a href="#" title="Hide navigation" aria-label="Hide navigation"><span></span></a>

Open in new window

While pure CSS menus work well enough when used with a mouse (for the most part), adding keyboard and touchscreen support is more difficult. Also while it's best not to rely on JavaScript support, it's possible to make the menu be always visible when JavaScript isn't available to open/close it.

This looks like a good menu system: http://www.smartmenus.org/

I'm glad to see Kim pointed out that ":hover" is not well-suited for use on mobile devices.
0
 

Author Comment

by:Jack
ID: 41803409
Hi Kim,

I think you are right about the grey indent.  It's more obvious the way it was.  In addition, this new way of indentation does not work on the browser that came with my Note 2.  All the sub items and sub menu are not indented.

If we revert back to the original way at least it will also work on my mobile browser, how do we make ITEM 5, 7 and 9 the same length?

How to use an graphic instead of the css code for the hamburger icon or can it be simply created with other way using css?
0
 

Author Comment

by:Jack
ID: 41803424
Hi David,

I am not sure how to get a third line by adding <span>?  Is there way to disable hover on mobile?  I would prefer user touch the whole menu to activate the item rather than the word.

I actually have two sets of the same menu on site.  One is shown for desktop and one is for mobile.  The reason is on mobile, I am hiding the left section where the menu is, thus the menu won't show.  So I added the second set on the header for the mobile which will hide on desktop mode.  I am not sure if there is a way to simply use one set of menu while they are in two different sections of the page.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41803450
how do we make ITEM 5, 7 and 9 the same length?
The <li>s with the dir class are getting an extra 15px padding-right. Add that padding to all first generation <li>s in the mobile media query to get the others to the same width. You can add it to the rule on line 205 of your fiddle which only applies to the top-level menu items.
  #nav > ul > li {
    width: 100%;
    float: none;
    padding-right: 15px;
  }

Open in new window

0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41803451
This question seems to be branching off in multiple directions now. I recommend you create a new question about creating a non-image triple-hamburger icon. It will make it easier for someone searching for hamburger icon suggestions in the future.
0
 

Author Comment

by:Jack
ID: 41803459
Thanks so much Kim.  You have solved my immediate issue.  The hamburger icon is indeed a different issue.

One related issue I have discovered as you have pointed out, is that one have to touch the "word" on the menu item to activate the menu.  Is there way to fix it so that it activates when they touch the menu bar?

Another small issue is the 1px border bottom of li.  It separates the menu items from one another.  However if you get to SUB MENU 2 level, one can see that there is a 1px border line for the SUB MENU 2, 1px for the for SUB ITEM 2 and 1px for ITEM 1, all 3 px are below SUB MENU 2.  Is there way to get rid of 2 of the border lines?  I have changed the color of the menu on the fiddle https://jsfiddle.net/u2k50dkv/15/ so the lines are very obvious.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41803479
Is there way to fix it so that it activates when they touch the menu bar?
This is the whole issue with the pure CSS menu and touchscreen devices. If you make it so that it activates when you touch the menu bar, you won't be able to expand the menu. You may be able to extend the menu item selection area by adding a display: block; property to the <a> tag or giving it a fixed width. But this reduces the area they can touch to expand the menu. (See line 237 in your fiddle)
ul.dropdown-vertical a:link,
ul.dropdown-vertical a:visited,
ul.dropdown-vertical a:hover{
  color: #fff;
  display: block;
}

Open in new window

Another small issue is the 1px border bottom of li.
This can be eliminated by removing the border-bottom on the last <li> of the group. (Add new rule to your mobile media query section)
ul.dropdown li:last-of-type {
  border-bottom: none 0 transparent;
}

Open in new window

0
 

Author Closing Comment

by:Jack
ID: 41805016
Other comments from Kim solved the issues related to the post.  Thanks Kim.
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41805880
You're welcome.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now