6 replies [Last post]
webcss
webcss's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT+8
Joined: 2013-03-26
Posts: 6
Points: 9

I really like this new website they just put up at http://www.autodesk.com/

The way how the menu drops down and the rest of the site just follows down is amazing and beautiful.

How do you accomplish such transition? I tried using Dreamweaver Spry but is just not the same thing.

Any resources or training or tips / directions to accomplish that sort of layout navigation would be great.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not exactly accessible

This page uses javascript for those dropdowns. It is a singularly bad design, as there is no failover for cases where javascript is not in use. This makes the site inaccessible to many with disabilities. Google for javascript dropdown menus. There are likely a potload out there. A good one will make the sub-menus usable without javascript.

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.

webcss
webcss's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT+8
Joined: 2013-03-26
Posts: 6
Points: 9

gary.turner wrote: This page

gary.turner wrote:

This page uses javascript for those dropdowns. It is a singularly bad design, as there is no failover for cases where javascript is not in use. This makes the site inaccessible to many with disabilities. Google for javascript dropdown menus. There are likely a potload out there. A good one will make the sub-menus usable without javascript.

cheers,

gary

Hi gary.turner,

Thank you for your reply. But how can one achieve such effect with the page sliding down when the menu drops down in CSS or Javascript. I'm not after drop down menus. Sorry if I wasn't clear with my first post.

Any suggestions is appreciated. Thank you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You're even less clear now

You want dropdowns, but you don't want dropdowns. Maybe it's the nomenclature that's getting in the way.

In the example page, an onclick event handler makes the sub-menu appear while the page's content moves down to make room for it. Compare to more common drop-downs where the sub-menu rides over and obscures the content. CSS does not have a :click pseudo class, so javascript is required for this evolution.

I didn't dig into the script (hell, it's hard enough to make sense of my own code; much less someone else's) because as I have said, it's a failure. There are other scripts that are unobtrusive and accessible. Often, the click causes the js to change the class of the sub-menu to one that is visible or is moved from off screen.

Does that help?

gary

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

webcss
webcss's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT+8
Joined: 2013-03-26
Posts: 6
Points: 9

gary.turner wrote: You want

gary.turner wrote:

You want dropdowns, but you don't want dropdowns. Maybe it's the nomenclature that's getting in the way.

In the example page, an onclick event handler makes the sub-menu appear while the page's content moves down to make room for it. Compare to more common drop-downs where the sub-menu rides over and obscures the content. CSS does not have a :click pseudo class, so javascript is required for this evolution.

I didn't dig into the script (hell, it's hard enough to make sense of my own code; much less someone else's) because as I have said, it's a failure. There are other scripts that are unobtrusive and accessible. Often, the click causes the js to change the class of the sub-menu to one that is visible or is moved from off screen.

Does that help?

gary

Hi Gary,

Thanks for explaining that. Yes, that's what I meant. Since is not achievable with CSS such effect, you mentioned there are other ways to achieve such effect when: In the example page, an onclick event handler makes the sub-menu appear while the page's content moves down to make room for it.

What are other ways you mentioned?
Would love to dig deeper and know more on this effect. Just javascript dropdown menu?
What else is there?

Thank you and appreciated for your patience and explanation.
Cheers.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 6 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Just javascript if you want

Just javascript if you want the dropdown onclick. You can get the dropdown on hover with css. Two examples below. If you want the onclick method, you'll have to test the various scripts that are on the net. Just be sure the menus still work with javascript turned off.

The following css code is not well organized, but you should be able to puzzle it out.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
 
      html {
        overflow-y: scroll; /* to avoid scrollbar jump */
        }
 
      body {
        font: 100%/1.5 san-serif;
        margin: 0;
        }
 
      p {
        font-size: 1em;
        }
 
      h1, h2 {
        text-align: center;
        }
 
      #wrapper {
        border: 1px dotted gray;
        width: 90%;
        margin: 2em auto;
        }
 
 
      ul {
        line-height:30px;
        list-style:none;
        margin:0;
        padding:0; 
        text-align: center;
        text-shadow: 1px 1px 1px #000000;
        white-space: nowrap;
        }
 
      li {
        display: inline-block;
        border:1px solid #000000;
        position:relative;
        background:#999;
        vertical-align: top;
        }
 
      * + html ul li { /* so only ie7 sees it */
        display: inline;
        }
 
      ul li a {
        background-color: inherit;
        text-decoration: none;
        height:30px;
        width:150px;
        display:block;
        color: white;
        border: 1px solid white;
        }
 
      #nav ul { 
        display: none;
        left: 0;
        position:absolute; 
        top: 32px;
        }
 
      #nav li:hover ul {
        display: block;
        }
 
      ul ul {
        display: none;
        }
 
      ul li:hover ul {
        display: block;
        }
 
      ul ul li {
        display: block;
        }
 
      li:hover ul { 
        display: block;
        opacity: 1;
        }
 
      ul li:hover {
        background:#0099FF;
        }
 
      #nav li:hover ul li a:hover {
        background:#ccc;
        color: black;
        }
 
      ul a:hover {
        color: black;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <h1>Two common css dropdown menus</h1>
 
      <h2>Dropdown covers succeeding content</h2>
 
      <ul id="nav">
	<li><a href="#">Top level Ⅰ</a>
	  <ul>
	    <li><a href="#">Level ⅠA</a></li>
	    <li><a href="#">Level ⅠB</a></li>
	    <li><a href="#">Level ⅠC</a></li>
	    <li><a href="#">Level ⅠD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅱ</a>
	  <ul>
	    <li><a href="#">Level ⅡA</a></li>
	    <li><a href="#">Level ⅡB</a></li>
	    <li><a href="#">Level ⅡC</a></li>
	    <li><a href="#">Level ⅡD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅲ</a>
	  <ul>
	    <li><a href="#">Level ⅢA</a></li>
	    <li><a href="#">Level ⅢB</a></li>
	    <li><a href="#">Level ⅢC</a></li>
	    <li><a href="#">Level ⅢD</a></li>
	  </ul>
	</li> 
      </ul>
 
      <p>
	Quisque iaculis, ipsum sed pellentesque eleifend; lorem dolor
	tristique velit, sed mattis mi diam nec ligula. Quisque porttitor
	justo a leo ultricies in consequat nisl luctus. Maecenas vel ipsum
	dolor, ut aliquet nibh? Aenean neque ipsum, iaculis vel luctus at,
	ultrices sit amet sapien. Cras at neque volutpat ligula aliquet
	euismod. Nunc porttitor sollicitudin fermentum. Quisque pharetra nibh
	in lectus dignissim luctus. Pellentesque feugiat aliquet
	porttitor. Nullam semper magna eget quam bibendum faucibus. Integer et
	lacinia metus. Phasellus lobortis arcu id odio eleifend
	elementum. Praesent porta felis vitae tellus mollis euismod. Maecenas
	ligula justo, convallis fringilla luctus ac, bibendum quis erat.
      </p>
 
      <h2>Dropdown pushes succeeding content down</h2>
 
      <ul id="nav1">
	<li><a href="#">Top level Ⅰ</a>
	  <ul>
	    <li><a href="#">Level ⅠA</a></li>
	    <li><a href="#">Level ⅠB</a></li>
	    <li><a href="#">Level ⅠC</a></li>
	    <li><a href="#">Level ⅠD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅱ</a>
	  <ul>
	    <li><a href="#">Level ⅡA</a></li>
	    <li><a href="#">Level ⅡB</a></li>
	    <li><a href="#">Level ⅡC</a></li>
	    <li><a href="#">Level ⅡD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅲ</a>
	  <ul>
	    <li><a href="#">Level ⅢA</a></li>
	    <li><a href="#">Level ⅢB</a></li>
	    <li><a href="#">Level ⅢC</a></li>
	    <li><a href="#">Level ⅢD</a></li>
	  </ul>
	</li> 
      </ul>
 
      <p>
	Quisque iaculis, ipsum sed pellentesque eleifend; lorem dolor
	tristique velit, sed mattis mi diam nec ligula. Quisque porttitor
	justo a leo ultricies in consequat nisl luctus. Maecenas vel ipsum
	dolor, ut aliquet nibh? Aenean neque ipsum, iaculis vel luctus at,
	ultrices sit amet sapien. Cras at neque volutpat ligula aliquet
	euismod. Nunc porttitor sollicitudin fermentum. Quisque pharetra nibh
	in lectus dignissim luctus. Pellentesque feugiat aliquet
	porttitor. Nullam semper magna eget quam bibendum faucibus. Integer et
	lacinia metus. Phasellus lobortis arcu id odio eleifend
	elementum. Praesent porta felis vitae tellus mollis euismod. Maecenas
	ligula justo, convallis fringilla luctus ac, bibendum quis erat.
      </p>
 
    </div> <!-- end wrapper -->
  </body>
</html>

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.

webcss
webcss's picture
Offline
newbie
Last seen: 7 years 15 weeks ago
Timezone: GMT+8
Joined: 2013-03-26
Posts: 6
Points: 9

gary.turner wrote: Just

gary.turner wrote:

Just javascript if you want the dropdown onclick. You can get the dropdown on hover with css. Two examples below. If you want the onclick method, you'll have to test the various scripts that are on the net. Just be sure the menus still work with javascript turned off.

The following css code is not well organized, but you should be able to puzzle it out.

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
 
    <title>test doc</title>
 
    <!-- hack for bug in Web Developer addon for Firefox.  Used for
	 development and debugging only-->
    <link rel="stylesheet"
	  type="text/css" href="x" />
 
    <style type="text/css">
 
      html {
        overflow-y: scroll; /* to avoid scrollbar jump */
        }
 
      body {
        font: 100%/1.5 san-serif;
        margin: 0;
        }
 
      p {
        font-size: 1em;
        }
 
      h1, h2 {
        text-align: center;
        }
 
      #wrapper {
        border: 1px dotted gray;
        width: 90%;
        margin: 2em auto;
        }
 
 
      ul {
        line-height:30px;
        list-style:none;
        margin:0;
        padding:0; 
        text-align: center;
        text-shadow: 1px 1px 1px #000000;
        white-space: nowrap;
        }
 
      li {
        display: inline-block;
        border:1px solid #000000;
        position:relative;
        background:#999;
        vertical-align: top;
        }
 
      * + html ul li { /* so only ie7 sees it */
        display: inline;
        }
 
      ul li a {
        background-color: inherit;
        text-decoration: none;
        height:30px;
        width:150px;
        display:block;
        color: white;
        border: 1px solid white;
        }
 
      #nav ul { 
        display: none;
        left: 0;
        position:absolute; 
        top: 32px;
        }
 
      #nav li:hover ul {
        display: block;
        }
 
      ul ul {
        display: none;
        }
 
      ul li:hover ul {
        display: block;
        }
 
      ul ul li {
        display: block;
        }
 
      li:hover ul { 
        display: block;
        opacity: 1;
        }
 
      ul li:hover {
        background:#0099FF;
        }
 
      #nav li:hover ul li a:hover {
        background:#ccc;
        color: black;
        }
 
      ul a:hover {
        color: black;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <h1>Two common css dropdown menus</h1>
 
      <h2>Dropdown covers succeeding content</h2>
 
      <ul id="nav">
	<li><a href="#">Top level Ⅰ</a>
	  <ul>
	    <li><a href="#">Level ⅠA</a></li>
	    <li><a href="#">Level ⅠB</a></li>
	    <li><a href="#">Level ⅠC</a></li>
	    <li><a href="#">Level ⅠD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅱ</a>
	  <ul>
	    <li><a href="#">Level ⅡA</a></li>
	    <li><a href="#">Level ⅡB</a></li>
	    <li><a href="#">Level ⅡC</a></li>
	    <li><a href="#">Level ⅡD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅲ</a>
	  <ul>
	    <li><a href="#">Level ⅢA</a></li>
	    <li><a href="#">Level ⅢB</a></li>
	    <li><a href="#">Level ⅢC</a></li>
	    <li><a href="#">Level ⅢD</a></li>
	  </ul>
	</li> 
      </ul>
 
      <p>
	Quisque iaculis, ipsum sed pellentesque eleifend; lorem dolor
	tristique velit, sed mattis mi diam nec ligula. Quisque porttitor
	justo a leo ultricies in consequat nisl luctus. Maecenas vel ipsum
	dolor, ut aliquet nibh? Aenean neque ipsum, iaculis vel luctus at,
	ultrices sit amet sapien. Cras at neque volutpat ligula aliquet
	euismod. Nunc porttitor sollicitudin fermentum. Quisque pharetra nibh
	in lectus dignissim luctus. Pellentesque feugiat aliquet
	porttitor. Nullam semper magna eget quam bibendum faucibus. Integer et
	lacinia metus. Phasellus lobortis arcu id odio eleifend
	elementum. Praesent porta felis vitae tellus mollis euismod. Maecenas
	ligula justo, convallis fringilla luctus ac, bibendum quis erat.
      </p>
 
      <h2>Dropdown pushes succeeding content down</h2>
 
      <ul id="nav1">
	<li><a href="#">Top level Ⅰ</a>
	  <ul>
	    <li><a href="#">Level ⅠA</a></li>
	    <li><a href="#">Level ⅠB</a></li>
	    <li><a href="#">Level ⅠC</a></li>
	    <li><a href="#">Level ⅠD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅱ</a>
	  <ul>
	    <li><a href="#">Level ⅡA</a></li>
	    <li><a href="#">Level ⅡB</a></li>
	    <li><a href="#">Level ⅡC</a></li>
	    <li><a href="#">Level ⅡD</a></li>
	  </ul>
	</li>
 
	<li><a href="#">Top level Ⅲ</a>
	  <ul>
	    <li><a href="#">Level ⅢA</a></li>
	    <li><a href="#">Level ⅢB</a></li>
	    <li><a href="#">Level ⅢC</a></li>
	    <li><a href="#">Level ⅢD</a></li>
	  </ul>
	</li> 
      </ul>
 
      <p>
	Quisque iaculis, ipsum sed pellentesque eleifend; lorem dolor
	tristique velit, sed mattis mi diam nec ligula. Quisque porttitor
	justo a leo ultricies in consequat nisl luctus. Maecenas vel ipsum
	dolor, ut aliquet nibh? Aenean neque ipsum, iaculis vel luctus at,
	ultrices sit amet sapien. Cras at neque volutpat ligula aliquet
	euismod. Nunc porttitor sollicitudin fermentum. Quisque pharetra nibh
	in lectus dignissim luctus. Pellentesque feugiat aliquet
	porttitor. Nullam semper magna eget quam bibendum faucibus. Integer et
	lacinia metus. Phasellus lobortis arcu id odio eleifend
	elementum. Praesent porta felis vitae tellus mollis euismod. Maecenas
	ligula justo, convallis fringilla luctus ac, bibendum quis erat.
      </p>
 
    </div> <!-- end wrapper -->
  </body>
</html>

cheers,

gary

Thank you gary.turner.
Again, appreciated your reply.