SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Visually positioning a nested list behind it's parent list

    Hi, I'm fairly certain this isn't possible but I thought it'd be worth asking.

    Is it possible to visually position a nested <ul> behind it's parent?

    Basically I'm animating the subnav from behind it's parent. The same as on this site (hover over 'About Us' in the main nav).

    Any suggestions are welcome.

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Someone replied but it's not appearing for some reason. Turned out a negative z-index works just fine!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I posted that but then deleted it, as I realized it wasn't working properly. With the negative z-index, you can't actually hover over the flyout menu. I tried a few things to solve that, but haven't got it yet. You can change the z-index on hover, but then it slides over the main menu instead of underneath. If you got it to work, please post your solution! Here's what I posted, in case anyone can improve on it (I'm sure there's a way, I'm just no ace with CSS!:


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Peep out menu</title>
    	
    <style media="all">
    ul {list-style: none; margin: 0; padding: 0; width: 200px;}
    .menu {position: relative;  background: #222;}
    a {text-decoration: none; line-height: 1.75em; padding-left:10px; display: block;}
    .menu li a {color: #eee;}
    .menu li a:hover, .menu li a:focus {color: white;}
    .menu li ul li a {color: #333;}
    .menu li ul li a:hover {color: black;}
    .menu ul {background: #ccc; position: absolute; right: 0; top: 0; z-index: -1}
    .menu li:hover ul {right: -200px; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;}
    
    </style>
    	
    </head>
    <body>
    
    <ul class="menu">
    	<li><a href="">Link 1</a>
    		<ul class="menu">
    			<li><a href="">Link 5</a></li>
    			<li><a href="">Link 6</a></li>
    			<li><a href="">Link 7</a></li>
    			<li><a href="">Link 8</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 2</a>
    		<ul class="menu">
    			<li><a href="">Link 9</a></li>
    			<li><a href="">Link 10</a></li>
    			<li><a href="">Link 11</a></li>
    			<li><a href="">Link 12</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 3</a>
    		<ul class="menu">
    			<li><a href="">Link 13</a></li>
    			<li><a href="">Link 14</a></li>
    			<li><a href="">Link 15</a></li>
    			<li><a href="">Link 16</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 4</a>
    		<ul class="menu">
    			<li><a href="">Link 17</a></li>
    			<li><a href="">Link 18</a></li>
    			<li><a href="">Link 19</a></li>
    			<li><a href="">Link 20</a></li>
    		</ul>
    	</li>
    </ul>
    
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got it working not sure what I changed but I will update this post with my working version after work.

    Thanks!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    I will update this post with my working version after work.
    Great, look forward to it.

  6. #6
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quite sure what I did to get it working but here is my code.

    Here is a working example - http://jsfiddle.net/WTjHn/

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Peep out menu</title>
    	
    <style media="all">
    body {
    	font-family: arial;
    }
    nav {
      background: #ccc;
      font-size: 1.07692em;
      font-weight: 600;
      margin-bottom: 1.483%;
      text-transform: uppercase;
      position: relative;
      width: 20%;
      z-index: 10;
    }
    nav > ul {
      background: #aaa;
      z-index: 10;
      padding: 10% 0;
      list-style: none;
    }
    nav li.current a {
      color: #e8872a;
    }
    nav li:hover > ul {
      left: 100%;
    }
    nav li:hover > a {
      color: #0fc;
    }
    nav a {
      color: #000;
      padding: 0 10%;
      display: block;
      text-decoration: none;
    }
    
    nav .sub_nav {
      -webkit-transition: all ease-in-out;
      -webkit-transition-delay: 300ms;
      -moz-transition: all ease-in-out 300ms;
      -o-transition: all ease-in-out 300ms;
      transition: all ease-in-out 300ms;
    	list-style: none;
      display: block;
      position: absolute;
      padding: 10% 0;
      top: 0;
      left: -2%;
      width: 98%;
      height: 100%;
      margin-left: 2%;
      z-index: -30;
    }
    
    nav .sub_nav a {
      cursor: pointer;
    }
    
    </style>
    	
    </head>
    <body>
    <nav>
    <ul>
    	<li><a href="">Link 1</a>
    		<ul class="sub_nav">
    			<li><a href="">Link 5</a></li>
    			<li><a href="">Link 6</a></li>
    			<li><a href="">Link 7</a></li>
    			<li><a href="">Link 8</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 2</a>
    		<ul class="sub_nav">
    			<li><a href="">Link 9</a></li>
    			<li><a href="">Link 10</a></li>
    			<li><a href="">Link 11</a></li>
    			<li><a href="">Link 12</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 3</a>
    		<ul class="sub_nav">
    			<li><a href="">Link 13</a></li>
    			<li><a href="">Link 14</a></li>
    			<li><a href="">Link 15</a></li>
    			<li><a href="">Link 16</a></li>
    		</ul>
    	</li>
    	<li><a href="">Link 4</a>
    		<ul class="sub_nav">
    			<li><a href="">Link 17</a></li>
    			<li><a href="">Link 18</a></li>
    			<li><a href="">Link 19</a></li>
    			<li><a href="">Link 20</a></li>
    		</ul>
    	</li>
    </ul>
    </nav>
    </body>
    </html>

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Hehe, thanks for posting that. Nice work. It does seem to require an extra element around it to set the positioning context, which is a bit of a shame, but pretty easy to live with, all the same. Here's my final version (though it's nice the way you give it a flexible width):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Peep out menu</title>
    	
    <style media="all">
    .wrap {position: relative; width: 200px; z-index: 10;}
    ul {list-style: none; margin: 0; padding: 0; }
    .menu {width: 200px; background: #222;}
    a {color: white; text-decoration: none; line-height: 1.75em; padding-left: 10px; display: block;}
    .menu li a {width: 190px;}
    .menu li a:hover, .menu li a:focus, .menu li:hover {background: red;}
    .menu ul {background: #30353b; position: absolute; left: 0; top: 0; z-index: -1; width: 200px; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;}
    .menu li:hover ul {left: 100%;}
    
    </style>
    	
    </head>
    <body>
    <div class="wrap">
    	<ul class="menu">
    		<li><a href="">Link 1</a>
    			<ul>
    				<li><a href="">Link 5</a></li>
    				<li><a href="">Link 6</a></li>
    				<li><a href="">Link 7</a></li>
    				<li><a href="">Link 8</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 2</a>
    			<ul>
    				<li><a href="">Link 9</a></li>
    				<li><a href="">Link 10</a></li>
    				<li><a href="">Link 11</a></li>
    				<li><a href="">Link 12</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 3</a>
    			<ul>
    				<li><a href="">Link 13</a></li>
    				<li><a href="">Link 14</a></li>
    				<li><a href="">Link 15</a></li>
    				<li><a href="">Link 16</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 4</a>
    			<ul>
    				<li><a href="">Link 17</a></li>
    				<li><a href="">Link 18</a></li>
    				<li><a href="">Link 19</a></li>
    				<li><a href="">Link 20</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    
    </body>
    </html>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Here's also a (kind of lame) attempt to make it keyboard accessible:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    
    <title>Peep out menu</title>
    	
    <style media="all">
    .wrap {position: relative; width: 200px; z-index: 10;}
    ul {list-style: none; margin: 0; padding: 0; }
    .menu {width: 200px; background: #222;}
    a {color: white; text-decoration: none; line-height: 1.75em; padding-left: 10px; display: block;}
    .menu li a {width: 190px;}
    .menu li a:hover, .menu li a:focus, .menu li:hover {background: red;}
    .menu ul {background: #30353b; position: absolute; left: 0; top: 0; z-index: -1; width: 200px; 
    	/*-webkit-transition: all linear .3s; -moz-transition: all linear .3s; -o-transition: all linear .3s; -ms-transition: all linear .3s; transition: all .3s;*/}
    .menu li:hover ul {left: 100%;}
    
    .menu li a:focus + ul, .menu ul li a:focus {left: 100%; position: absolute;}
    
    </style>
    	
    </head>
    <body>
    <div class="wrap">
    	<ul class="menu">
    		<li><a href="">Link 1</a>
    			<ul>
    				<li><a href="">Link 5</a></li>
    				<li><a href="">Link 6</a></li>
    				<li><a href="">Link 7</a></li>
    				<li><a href="">Link 8</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 2</a>
    			<ul>
    				<li><a href="">Link 9</a></li>
    				<li><a href="">Link 10</a></li>
    				<li><a href="">Link 11</a></li>
    				<li><a href="">Link 12</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 3</a>
    			<ul>
    				<li><a href="">Link 13</a></li>
    				<li><a href="">Link 14</a></li>
    				<li><a href="">Link 15</a></li>
    				<li><a href="">Link 16</a></li>
    			</ul>
    		</li>
    		<li><a href="">Link 4</a>
    			<ul>
    				<li><a href="">Link 17</a></li>
    				<li><a href="">Link 18</a></li>
    				<li><a href="">Link 19</a></li>
    				<li><a href="">Link 20</a></li>
    			</ul>
    		</li>
    	</ul>
    </div>
    
    </body>
    </html>
    I turned off the slide effect here, as it is a bit offputting when tabbing.

  9. #9
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah of course, the extra element isn't needed. Just what I had in my version. What did you change on yours to make it work then. I originally tried amending yours but couldn't figure out what was needed!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Ah of course, the extra element isn't needed.
    Oh, it does seem to be needed. That's the main difference between yours and my original. I just added the outer wrap div (equivalent to your <nav>), set it as the positioning context (instead of the top level UL), and it worked.

  11. #11
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, sorry yes. I wasn't thinking!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •