SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: Slide Down Menu

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide Down Menu

    Hi, I have created a slide down menu

    Live Example:
    http://adamhuxtable.com/testing_area/

    It is working, however I want the content (purple area) to be pushed under the menu(blue area) when it appears.

    Code Used:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    
    <script type="text/javascript">
     
    // When the DOM is ready, initialize the scripts.
    jQuery(function( $ ){
     
    // Get a reference to the container.
    var worknav_container = $( "#worknav_container" );
     
     
    // Bind the link to toggle the slide.
    $( "a" ).click(
    function( event ){
    // Prevent the default event.
    event.preventDefault();
     
    // Toggle the slide based on its current
    // visibility.
    if (worknav_container.is( ":visible" )){
     
    // Hide - slide up.
    worknav_container.slideUp( 1000 );
     
    } else {
     
    // Show - slide down.
    worknav_container.slideDown( 1000 );
     
    }
    }
    );
     
    });
     
    </script>
    </head>
    
    <body>
    
    <div id="top_container">
        <div id="header">
        	<nav>
           	  <ul>
                <li>Home</li>
                    <li><a href="#">Work</a></li>
                    <li>About</li>
                    <li>Contact</li>
              </ul>
          </nav>
            <div id="twitter"><a href="http://www.twitter.com/adamhuxtable"><img src="assets/twitter_newbird_white.png" width="42" height="30" align="absmiddle" style="padding-right:10px;" /><span style="display:inline-block; float:right; margin-top:7px;">@adamhuxtable</span></a></div>
        </div>
        
        <div id="worknav_container">
        	<div id="worknav">
           Prototypes
            </div>
        </div>
    </div>
    
    <div id="body">
    Adam
    </div>
    
    </body>
    </html>
    Code:
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    	margin:0;
    	padding:0;
    	border:0;
    	outline:0;
    	font-size:100%;
    	vertical-align:baseline;
    	font-family:Arial, Helvetica, sans-serif;
    	background:transparent;
    }
    
    body {
        line-height:1;
    }
    
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section { 
        display:block;
    }
    
    nav li {
        display: inline;
    list-style-type: none;
    padding-right:25px;
    }
    
    blockquote, q {
        quotes:none;
    }
    
    blockquote:before, blockquote:after,
    q:before, q:after {
        content:'';
        content:none;
    }
    
    a {
        margin:0;
        padding:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
    }
    
    /* change colours to suit your needs */
    ins {
        background-color:#ff9;
        color:#000;
        text-decoration:none;
    }
    
    /* change colours to suit your needs */
    mark {
        background-color:#ff9;
        color:#000; 
        font-style:italic;
        font-weight:bold;
    }
    
    del {
        text-decoration: line-through;
    }
    
    abbr[title], dfn[title] {
        border-bottom:1px dotted;
        cursor:help;
    }
    
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    
    /* change border colour to suit your needs */
    hr {
        display:block;
        height:1px;
        border:0;   
        border-top:1px solid #cccccc;
        margin:1em 0;
        padding:0;
    }
    
    input, select {
        vertical-align:middle;
    }
    
    #top_container{
    	width:100%;
    	background:#000;
    	height:40px;
    }
    
    #header{
    	width:920px;
    	margin:0 auto;
    }
    
    nav{
    	color:#ffffff;
    	margin-left:25px;
    	padding-top:15px;
    	padding-bottom:5px;
    	
    	font-size:14px;
    	font-weight:bold;
    	font-style:italic;
    	color:#ffffff;
    	float:left;
    	list-style:none;
    }
    
    #twitter{
    	float:right;
    	padding-top:5px;
    	padding-bottom:5px;
    	font-size:14px;
    	font-weight:bold;
    	font-style:italic;
    	color:#ffffff;
    }
    
    a:link{color:#ffffff;
    text-decoration:none;
    }
    
    #worknav_container{
    	clear:both;
    	width:100%;
    	background:#003366;
    	height:150px;
    	display:none;	
    }
    
    #worknav{
    	width:920px;
    	margin: 0 auto;
    	padding: 25px 25px 80px 80px;
    	color:#FFFFFF;
    }
    
    #body{
    	width:100%;
    	background:#993366;
    	float:left;
    	margin-top:200px;
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by adamhuxtable View Post
    I want the content (purple area) to be pushed under the menu(blue area) when it appears.
    CSS should solve that problem for you, where you give that purple area a clear left declaration.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    CSS should solve that problem for you, where you give that purple area a clear left declaration.
    Actually, I'm just testing now and that doesn't do it. However, there will be a CSS solution for this.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Actually, I'm just testing now and that doesn't do it. However, there will be a CSS solution for this.
    The top container currently has a fixed height of 40px. Remove that and you should be good to go.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, thanks for the reply I tried removing the height within container but all that does is push everything up and you can no longer see the links etc.

    Result is
    http://adamhuxtable.com/testing_area/index2.html

    Thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by adamhuxtable View Post
    Hey Paul, thanks for the reply I tried removing the height within container but all that does is push everything up and you can no longer see the links etc.
    Replace that 40px height with an auto overflow.

    Code css:
    #top_container{
        width:100%;
        background:#000;
        overflow: auto;
    }

    A CSS solution in the javascript forum. Oh yeah.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked a treat, thanks for your help!


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
  •