jQuery horizontal slide out navigation

Question 1

I just wanted to share this script I wrote in that hopes that someone might find it useful and can hopefully simplify it(?).

I'm very new to writing anything with jQuery, so this script is probably bulkier than it needs to be, but it does work.

Here's the full HTML page:

<!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>Simple Slide Panel</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <style type="text/css">
 html{ height:100%;}
 body {
 margin: 0 auto;
 padding: 0;
 font: 75%/120% Arial, Helvetica, sans-serif;
 height:100%
 }
 #menu1 {
 background: #754c24;
 height: 100%;
 width:0px; 
 float:right;
 overflow:hidden;
 }
 #menu2 {
 background: #fff;
 height: 100%;
 width:0px; 
 float:right;
 overflow:hidden;
 }
 #nav-bar {
 background: #333;
 height: 100%;
 width:30px; 
 float:right;
 }
 ul.nav-menu{
 padding:0px;
 margin:0;
 }
 ul.nav-menu li{
 list-style-type:none;
 padding:0px;
 width:10px;
 height:400px;
 }
 ul.nav-menu li a{
 display:block;
 width:100px;
 padding:5px;
 position:relative;
 right:42px;
 top:60px;
 color:#fff;
 text-decoration:none;
 }
 ul.nav-menu li a.btn-2{
 top:160px;
 }
 ul.nav-menu li a:hover{
 background-color:#fff;
 color:#000;
 }
 .rotate {
 -webkit-transform: rotate(-90deg); /* Safari */
 -moz-transform: rotate(-90deg); /* Firefox */
 -ms-transform: rotate(-90deg); /* IE */
 -o-transform: rotate(-90deg); /* Opera */
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
 }
 </style>
 </head>
 <body>
 <div id="menu1">This panel expands Too.</div>
 <div id="menu2">This panel expands</div>
 <div id="nav-bar">
 <ul class="nav-menu">
 <li>
 <a name="nav" href="#" class="btn-1 rotate">Slide Panel 1</a>
 <a name="nav" href="#" class="btn-2 rotate">Slide Panel 2</a>
 </li>
 </ul>
 </div><!--/nav-bar-->
 <script type="text/javascript">
 $(document).ready(function()
 {
 var $menu1 = $('#menu1');
 var $menu2 = $('#menu2');
 $('.btn-1').toggle(
 function()
 {
 if ($menu1.width() == 250)
 {
 $('#menu1').animate({width: "0"}, 500);
 }
 else {
 $('#menu2').animate({width:'0px'},500);
 $('#menu1').delay(500).animate({width:'250px'},500);
 } 
 },
 function()
 {
 if ($menu1.width() == 250)
 {
 $('#menu1').animate({width: "0"}, 500);
 }
 else {
 $('#menu2').animate({width:'0px'},500);
 $('#menu1').delay(500).animate({width:'250px'},500);
 }
 });
 $('.btn-2').toggle(
 function()
 {
 if ($menu2.width() == 250)
 {
 $('#menu2').animate({width: "0"}, 500);
 }
 else {
 $('#menu1').animate({width:'0px'},500);
 $('#menu2').delay(500).animate({width:'250px'},500);
 }
 },
 function()
 {
 if ($menu2.width() == 250)
 {
 $('#menu2').animate({width: "0"}, 500);
 }
 else {
 $('#menu1').animate({width:'0px'},500);
 $('#menu2').delay(500).animate({width:'250px'},500);
 }
 });
 });
 </script>
 </body>
</html>

Question 2

Just one quick tip, I see you set the menu1 and menu2 divs to variables and you use those variables in the if statements. You may want to also use the variables in place of the animate/delate calls as well. For instance: $('#menu1').animate({width: "0"}, 500); could be $menu1.animate({width: "0"}, 500);

Question 3

Thank you, that is a cleaner way to do it. I'm also wondering if there is some way to set it up so the buttons could be created dynamically and wouldn't have to be set as variables. Still pretty new to writing javascript/jquery but I'm guessing using the sibling function may be a place to start.

Question 4

@Levi: I'd upvote that if you write it as an asnwer.

Question 5

@Levi: i would upvote it too, but that's not saying much because i upvote everything

Question 6

2 comments:

Why are you passing the same function twice to $.toggle()? From the documentation it looks like it only takes 1 function, the callback.

You can abstract out the common functionality in those functions into one:

function toggleMenu(menu, alternateMenu) {
 if (menu.width() == 250) {
 menu.animate({width: "0"}, 500);
 }
 else {
 alternateMenu.animate({width:'0px'},500);
 menu.delay(500).animate({width:'250px'},500);
 } 
};
$(document).ready(function() { 
 $('.btn-1').toggle(function() {
 toggleMenu($('#menu1'), $('#menu2'));
 });
 $('.btn-2').toggle(function() {
 toggleMenu($('#menu2'), $('#menu1'));
 });
});

seand seandseand 2,4651 gold badge20 silver badges29 bronze badges · Answer 1 · 2012-02-05 03:51:23Z

2 comments:

Why are you passing the same function twice to $.toggle()? From the documentation it looks like it only takes 1 function, the callback.

You can abstract out the common functionality in those functions into one:

function toggleMenu(menu, alternateMenu) {
 if (menu.width() == 250) {
 menu.animate({width: "0"}, 500);
 }
 else {
 alternateMenu.animate({width:'0px'},500);
 menu.delay(500).animate({width:'250px'},500);
 } 
};
$(document).ready(function() { 
 $('.btn-1').toggle(function() {
 toggleMenu($('#menu1'), $('#menu2'));
 });
 $('.btn-2').toggle(function() {
 toggleMenu($('#menu2'), $('#menu1'));
 });
});

Stack Exchange Network

jQuery horizontal slide out navigation

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

jQuery horizontal slide out navigation

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions