Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607

    Push Sidenav Not Working?

    I'm currently working on a website that has a side navigation menu that can be pulled out and hidden. However, it isn't working and I'm not sure what I'm doing wrong. Any help would be greatly appreciated.

    When placing my cursor over the button to move the navigation bar out, as well as the "open" text, the cursor itself does something strange and when pressed will not move the navigation bar out as it should.

    I'm using the same code as seen on this tutorial, and I even pasted the code from the tutorial into another document to see if it wasn't a local/computer-related problem. It worked flawlessly in the second document.

    Also: while I'm here, I'm curious to see if it is possible to change the colors of the individual links when the mouse is over that item. The client would like it to look like the colors of the rainbow (i.e. one element as red, the next as orange, the next green, etc..) How would that be accomplished?

    HTML:
    Code:
    <body>
    <div id="mySidenav" class="sidenav">
        	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        	<a href="1.php">Item 1</a>
            <a href="2.php">Item 2</a>
    </div>
    <!--More code-->
    <span style="font-size:30px;cursor:pointer;color: white;" onClick="openNav()">☰ open</span>
    CSS;
    Code:
    /* NAVIGATION BAR */
    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
    }
    
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .sidenav a:hover {
        color: #f1f1f1;
    }
    
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    JavaScript
    Code:
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("hbanner").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("hbanner").style.marginLeft= "0";
        document.body.style.backgroundColor = "white";
    }
    Once again, any help would be greatly appreciated. Thanks.
    Last edited by gwf; Oct 25th, 2017 at 04:38 PM.

  2.  

  3. #2
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    I don't see a problem with your code.
    I copied & pasted it into a Web page and it worked fine.

    I added the ability to show different colors when the user mouses over each of the items.
    Code:
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>mousemove demo</title>
      <style>
      	 /* NAVIGATION BAR */
    	.sidenav {
    		height: 100%;
    		width: 0;
    		position: fixed;
    		z-index: 1;
    		top: 0;
    		left: 0;
    		background-color: #111;
    		overflow-x: hidden;
    		transition: 0.5s;
    		padding-top: 60px;
    	}
    	
    	.sidenav a {
    		padding: 8px 8px 8px 32px;
    		text-decoration: none;
    		font-size: 25px;
    		color: #818181;
    		display: block;
    		transition: 0.3s;
    	}
    	
    	.sidenav a:hover {
    		color: #f1f1f1;
    	}
    	
    	.sidenav .closebtn {
    		position: absolute;
    		top: 0;
    		right: 25px;
    		font-size: 36px;
    		margin-left: 50px;
    	}
    	
    	.spnOpenMenu {
    		font-size:30px; 
    		cursor:pointer; 
    		color:white;
    	}
    	
    	#nav1:hover {
    		color:red;
    	}
    	#nav2:hover {
    		color:blue;
    	}
    	#nav3:hover {
    		color:green;
    	}
    	#nav4:hover {
    		color:orange;
    	}
    	
    	@media screen and (max-height: 450px) {
    	  .sidenav {padding-top: 15px;}
    	  .sidenav a {font-size: 18px;}
    	}
     
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <div id="mySidenav" class="sidenav">
        	<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        	<a href="1.php" id="nav1">Item 1</a>
            <a href="2.php" id="nav2">Item 2</a>
            <a href="1.php" id="nav3">Item 3</a>
            <a href="2.php" id="nav4">Item 4</a>
    </div>
    <!--More code-->
    <span class="spnOpenMenu" onClick="openNav()">☰ open</span>
     
    <script>
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("hbanner").style.marginLeft = "250px";
        document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    }
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("hbanner").style.marginLeft= "0";
        document.body.style.backgroundColor = "white";
    }
    </script>
     
    </body>
    </html>
    ----------------------------------------------------------------------------------------------------------------------------------------------------
    Business Software Database Internet Websites
    Web Designers: Need some heavy lifting done?
    SoftLink Systems

  4. #3
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607
    I pasted the code into another page and it isn't working. Possible conflict?

    When I mouseover the section to open the bar, my cursor goes "wild" before settling on just being a normal pointer. A possible sign of the problem?

  5. #4
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    It's gotta be something to do with your browser.
    I just re-pasted the code into a blank .htm file and tested it in 2 browsers.
    It worked fine.

    You could delete this href="javascript:void(0)" which may be causing your mouse problem.
    It just returns undefined which is nothing. I'm pretty sure they put it there just to make the mouse cursor show up.

    If you want the cursor to change you'll just need to add cursorointer to the hover of the element.

    --------------------------------------------------------------------------------------------------------------------------
    Business Software • Database • Internet • Websites
    Web Designers: Need some heavy lifting done?
    SoftLink Systems

  6. #5
    gwf
    gwf is offline
    Junior Member
    Join Date
    Oct 2017
    Posts
    8
    Member #
    57607
    The href="javascript:void(0)" is for closing the navigation bar. Could that be causing the issue with the navigation bar not wanting to open?

    I just find it very frustrating as I've been trying to get this thing work for almost two weeks now and no such luck. Possibly a layering issue? "hbanner" is a full-page graphic that consumes the whole background (cover.)

    Is it okay if I PM you the code and link to the test page?

  7. #6
    Junior Member SoftLink's Avatar
    Join Date
    Sep 2017
    Location
    Central Florida
    Posts
    24
    Member #
    57480
    Sure you can pm me.
    I removed href="javascript:void(0)" and it closed just fine.
    javascript: void(0) just returns 'undefined'. It doesn't really do anything except provide an href so the mouse cursor turns to a pointer.

    I just copied & pasted the code I provided above into a new blank file.
    I tested it in IE 11, FireFox, Chrome & Opera.
    It worked fine in all four browsers.

    -------------------------------------------------------------------------------------------------------------
    Business Software • Database • Internet • Websites
    Web Designers: Need some heavy lifting done?
    SoftLink Systems


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:49 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com