SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Rob. Welcome to the forums.

    When I do this the top link becomes inactive?
    The top menu item isn't actually a link, as there are no <a> tags around it:

    Code:
    <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>
    Having content scroll over or under the menu doesn't look right to me. Have you considered giving the menu a space of its own on the left?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think Ralph misunderstood what was happening

    You have 4 groups of links and when you click a link the next set of links scroll into view and each set of links has one inactive item representing the currently chosen item. However as soon as you used position:fixed then any content in that fixed wrapper that lies outside the viewport will be unreachable. Fixed elements by their very nature mean that they will not scroll with the document.

    The solution would be to use just one set of links but to make them all links so that you use the same links all the time and not 4 sets of links. You could get the js to add a class to make the link look inactive (or if you are clever remove the anchor on the current item).

    Here's an example of adding a class ot make the current item look inactive.

    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></style>
    <style>
    * {
    	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(http://www.sitepoint.com/forums/showthread.php?1017003&p=5375397#post5375397) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    html #section3 {
    	background: url(http://www.sitepoint.com/forums/showthread.php?1017003&p=5375397#post5375397) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    html #section4 {
    	background: url(http://www.sitepoint.com/forums/showthread.php?1017003&p=5375397#post5375397) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    .nav li a.active, .nav li a.active:hover {
    	cursor:default;
    	text-decoration:none;
    	color:#f00;
    }
    </style>
    <body>
    <div class="section black"  id="section1">
    		<h2>rob mullins</h2>
    		<p>About me 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><a href="#section4">Motion</a></li>
    		</ul>
    </div>
    <div class="section black" id="section2">
    		<h2>Design</h2>
    		<p>Design intro here</p>
    </div>
    <div class="section black" id="section3">
    		<h2>Web</h2>
    		<p>Web intro here</p>
    </div>
    <div class="section black" id="section4">
    		<h2>Motion</h2>
    		<p>Motion intro here</p>
    </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 li:first a').addClass('active');
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
    																				$('ul.nav a').removeClass('active');
    																				$anchor.addClass('active');
                        
                      /* $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 2500,'easeInOutExpo');
                        */
                         
                        $('html, body').stop().animate({
                            scrollTop: $($anchor.attr('href')).offset().top
                        }, 1000);
                        
                        event.preventDefault();
                    });
                });
    			  
            </script>
    </body>
    </html>

    The css:

    Code:
    .nav li a.active, .nav li a.active:hover {
    	cursor:default;
    	text-decoration:none;
    	color:#f00;
    }

    The extra js:
    Code:
     $(function() {
    	 $('ul.nav li:first a').addClass('active');// set first item to have the 'active' class by default
                    $('ul.nav a').bind('click',function(event){
                        var $anchor = $(this);
    		    $('ul.nav a').removeClass('active');// remove all active classes
    			$anchor.addClass('active');// apply active to only this clicked one
                           //rest of code follows here as before..

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, really appreciate you taking the time to look at my messy code!
    Cheers man!

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thanks a million for looking at and providing a solution to my query, really appreciate you taking the time. I'm going to brew up a big pot of coffee and try and decipher your solution (which works great!) until my css fragile brain can understand it!!,
    Cheer again!
    Rob


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
  •