SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PROBLEM GETTING SIDE BAR MENU TO WORK IN FIXED POSITION

    Hi,
    If anyone could help me with what should be a fairly easy problem I'd really appreciate it, I've basically put together a site for myself using code I've found. It's a vertical scrolling website with 4 div containers, the scrolling is managed by jquery.easing.1.3.js. and jquery.min.jsforest2.jpgforest.jpgforest3.jpgforest4.jpg

    Everything works perfectly when the side menu is set to scroll with the div containers, but I want to fix it to the browser frame. When I do this the top link becomes inactive?

    Below is the code and images, if anyone cares to take a look I'd be eternally grateful!
    Thanks
    Rob

    *****THE HTML*******
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
        <head>
            <title>Rob Mullins</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="description" content="Rob Mullins CV" />
            <meta name="keywords" content="design, web, motion, graphic, visualist"/>
            <link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>
            <link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
        </head>
        <style>
            /* turned off this to lessen code that's active
    		a{
                color: #0F0;
                text-decoration:none;
            }
            a:hover{
                text-decoration: none;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:70px;
                font-weight: 300;
            }
            span.reference a{
                color: #CCC;
                padding-right:20px;
            }
            span.reference a:hover{
                color: #0F0;
                text-decoration:none;
            }*/
    
        </style>
        
        
        <body>
            <div class="section black"  id="section1">
              	<h2>rob mullins</h2>
    			<p>About me here</p>        
    			<ul class="nav">
                    <li>About</li>
                    <li><a href="#section2">Design</a></li>
                    <li><a href="#section3">Web</a></li>
                    <li><a href="#section4">Motion</a></li>
    			</ul>
    				</div>
                
            <div class="section black" id="section2">
                <h2>Design</h2>
                <p>Design intro here</p>
                <ul class="nav">
                    <li><a href="#section1">About</a></li>
                    <li>Design</li>
                    <li><a href="#section3">Web</a></li>
                    <li><a href="#section4">Motion</a></li>
    			</ul>
            		</div>
    
            <div class="section black" id="section3">
                <h2>Web</h2>
                <p>Web intro here</p>
                <ul class="nav">
                    <li><a href="#section1">About</a></li>
                    <li><a href="#section2">Design</a></li>
                    <li>Web</li>
    				<li><a href="#section4">Motion</a></li>
    			</ul>
    				</div>
    
            <div class="section black" id="section4">
                <h2>Motion</h2>
                <p>Motion intro here</p>
                <ul class="nav">
                    <li><a href="#section1">About</a></li>
                    <li><a href="#section2">Design</a></li>
                    <li><a href="#section3">Web</a></li>
                    <li>Motion</li>
    			</ul>
            		</div>
      
    
            <!-- The JavaScript -->
            <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Monda::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })(); </script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>		
            <script type="text/javascript" src="jquery.easing.1.3.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
                        
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 2500,'easeInOutExpo');
                        /*
                        if you don't want to use the easing effects:
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 1000);
                        */
                        event.preventDefault();
                    });
                });
    			  
            </script>
        </body>
    </html>

    *****THE CSS*******
    Code css:
    *{
        margin:0;
        padding:0;
    }
     
    body{
        background: #FFF; 
        font-family: Monda;
        font-size: 20px;
        font-style: normal;
        letter-spacing:-1px;
    }
     
    .section{
        margin:0px;
        height:1000px;
        width:100%;
        float:left;
     
     
    }
    .section h2{
        margin:50px 0px 30px 50px;
    }
     
     
    .section p{
        margin:20px 0px 0px 50px;
        width:900px;
    }
     
    .section ul{
        list-style:none;
        margin:0px 0px 0px 0px; 
     
     
    	/* THIS IS WHERE THE PROBLEM SEEMS TO BE - THE ABOUT LINK BECOME INACTIVE ONCE THE MENU IS FIXED IN PLACE? IF POSITION IS CHANGED TO ABSOLUTE THEN THE MENU WORKS OK BUT SCROLLS WITH THE PAGE, WHICH IS NOT WHAT I'M TRYING TO ACHIEVE*/
    	position:fixed;
    	}
     
    ul li{
        float: none;
        padding:auto;
        margin:30px 50px;
        color: #C3F;
    	}
     
    ul li a{
        display:block;
        color: #F00;
     
    }
     
    ul li a:hover{
        text-decoration:none;
        color: #600;
    }
     
    /* turned off this section as its not needed. 
    #nav ul li{
        float:none;
        padding:5px;
        margin:5px;
        color:#aaa;
    }
     
    #nav ul li a{
        display:block;
        color: #CF3;
    }
     
    #nav ul li a:hover{
        text-decoration:none;
        color: #0CF;
    }
    */
     
     
    html #section1 { 
      background: url(../images/forest.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
     
    html #section2 { 
      background: url(../images/forest2.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
     
    html #section3 { 
      background: url(../images/forest3.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
     
    html #section4 { 
      background: url(../images/forest4.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    Last edited by cpradio; Mar 30, 2013 at 17:13. Reason: Added html and css tags


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
  •