1 reply [Last post]
WebDevGuy
WebDevGuy's picture
Offline
newbie
Last seen: 6 weeks 5 days ago
Timezone: GMT-5
Joined: 2016-12-04
Posts: 1
Points: 2

Hey Guys,

So I have an issue. This is probably an easy fix, but I have a full screen vertical overlay navigation menu with sub links (sub-lists). My issue is that I am trying to get the first set of list items to slide down so that the nested list items can slide down to be displayed. So far, I am only able to get the sub list items to slide down. Here is my codepen link:

https://codepen.io/WebDevGuy/pen/VmQdWg

Any advice or help would be greatly appreciated Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 45 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9617
Points: 3685

Is this sorta what you want?

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    html {
        padding: 0;}
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;}
 
    p {
        font-size: 1em;}
 
    /* end boilerplate */
 
    #global-nav {
	display: table;
	margin: 1em auto 0;}
 
    #global-nav,
    #global-nav ul {
	list-style: none;
	padding-left: 1em;}
 
    #global-nav ul {
	height: 0;
	overflow: hidden;}
 
    #global-nav li:hover ul {
	height: auto;}
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <header>
      <div>
        <span style="font-size:30px;
		     cursor:pointer;
		     padding-right: 15px;"
		onclick="openNav()">&#9776;</span>
 
        <div id="myNav" class="overlay">
          <a onmouseover='this.style.textDecoration="none"'
		  onmouseout='this.style.color="#818181"'" 
		  href="javascript:void(0)" 
		  class="closebtn" 
		  onclick="closeNav()">&times;</a>
 
          <ul id="global-nav">
            <li><a href="#">Page 1</a></li>
 
            <li><a href="#">Page 2</a></li>
 
            <li><a href="#">Page 3</a>
              <ul>
                <li><a href="#">Page 3a</a></li>
 
                <li><a href="#">Page 3b</a></li>
 
                <li><a href="#">Page 3c</a></li>
              </ul>
            </li>
 
            <li><a href="#">Page 4</a>
              <ul>
                <li><a href="#">Page 4a</a></li>
 
                <li><a href="#">Page 4b</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </header>
 
    <hr>
 
    <div id="main">
      <div class="pages">
	<p>A section of the page</p>        
      </div>
    </div>
  </body>
</html>

I've ignored the javascript. It is poor practice to have javascript within the html. See your onclick attributes.

Likewise it is poor practice to use the style attribute. Move that to your css file.

Using the style in the head is also poor practice. I did it for simplicity in the test page. These styles should be moved to your css file.

Mobiles do not have a mouse, so no :hover pseudo class. You'll need to create onclick event handlers to do that job. On a desktop, though, it may be annoying.

The page must be completely usable without css or javascript or it is a FAIL. Presentation (css) and behavior (js) are embellishments; you should not depend on their being supported. For example, folks using assistive technologies or me working at my server where I have only a plain text browser or in my editor where the built-in browser supports neither.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.