Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,149,728 members, 7,805,985 topics. Date: Tuesday, 23 April 2024 at 09:43 AM

Jquery Menu Like The One On Emirates Website - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Jquery Menu Like The One On Emirates Website (978 Views)

Webmaster How Will You Create This Menu? / Tutorial: Building A Facebook Chat With Jquery/php / Free Jquery Mb.menu (2) (3) (4)

(1) (Reply) (Go Down)

Jquery Menu Like The One On Emirates Website by ace1(m): 4:19pm On Aug 26, 2013
Good day house,

I just started learning javascript and jquery. I've read a couple of books and watched a couple of tutorial videos but I'm not well grounded in it yet. Please how do i achieve the menu on the right, positioned above the banner on www.emirates.com? I want to achieve this same thing just that the content of the sliding div would be different.

I've tried coding it but still not getting it.

I want the div with a class of overlay to slide from left to right just as it is on www.emirates.com instead of toggling down
When the div with the overlay class is active/visible and another menu li is clicked, I want the already open div.overlay to close first before the corresponding div.overlay of the li that was clicked becomes active
I also don't want the div.overlay to hide when its clicked. I figured it's cos the li holding the div.overlay function has the "show_hide" class. I'll add a close button and div.overlay should only hide when the close button is clicked or when another menu li item is clicked.

Please, how do i fix all these

These are the codes:

<!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>Emirates Menu Attempt</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".banner_nav li .overlay"wink.hide();
	$(".show_hide"wink.show();
	
	$('.show_hide').click(function(){
	$(this).find(".overlay"wink.slideToggle();
	});
});
</script>
<style>
#banner_wrap {
	margin: 20px 0 0 0;
}
#banner {
	height: auto;
	border: 1px solid #f4a76a;
	width: 900px;
	margin: auto;
	position: relative;
	z-index: 5;
}
#banner_menu {
	width: 260px;
	position: absolute;
	right: 20px;
	top: -15px;
	height: 344px;
	background:#EA4706;
	padding: 20px;
	color: #FFF;
}
.banner_nav {
	list-style:none;
	padding:0px;
	margin: 20px 0 0 0px;
}
.banner_nav > li {
	line-height: 30px;
	text-transform: uppercase;
	font-size: 1em;
	float: none;
}
.banner_nav > li a {
	display: block;
	padding: 0 15px;
	color: #fff;
	text-decoration: none;
}
.banner_nav > li a:hover {
	background: none;
	text-decoration: underline;
}
.banner_nav > li .overlay {
	display:none;
	position: absolute;
	z-index: 25;
	width: 535px;
	background-color: #fff;
	top: 0;
	left: -580px;
	border: 1px solid #e1e1e1;
	height: 330px;
	padding: 20px;
}
.banner_nav li .overlay .col_3 {
	width: 167px;
	margin-right: 10px;
	border-right: 1px solid #eee;
	float: left;
	height: 290px;
	line-height: 1;
	text-transform: none;
}
/*--- VERTCAL MENU ---*/
.banner_nav li .overlay .col_3 #v_menu {
	list-style:none;
	padding:0px;
	margin: 0px;
}
.banner_nav li .overlay .col_3 #v_menu > li {
	line-height: 30px;
	text-transform: uppercase;
	width: 166px;
	font-size: 0.875em;
	float: none;
}
.banner_nav li .overlay .col_3 #v_menu > li a {
	display: block;
	padding: 0 15px;
	color: #696565;
}
.banner_nav .overlay .col_3 #v_menu > li a:hover {
	color: #696565;
	background: none;
	text-decoration: underline;
}
.show_hide {
	display:none;
}
</style>
</head>
<body>
<div id="banner_wrap">
  <div id="banner"><img src="banner.jpg" width="900" height="350" alt="efghn" />
    <div id="banner_menu">
      <div class="banner_vert_menu">
        <ul class="banner_nav">
          <li class="show_hide"> <a href="#">Airlines</a>
            <div class="overlay">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <li class="show_hide"> <a href="#">Security</a>
            <div class="overlay">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <li class="show_hide"> <a href="#">Hotels</a>
            <div class="overlay">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <li class="show_hide"> <a href="#">Taxes</a>
            <div class="overlay">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Re: Jquery Menu Like The One On Emirates Website by remmyz(m): 8:16pm On Aug 26, 2013
graphicsplus is coming to help you
Re: Jquery Menu Like The One On Emirates Website by ace1(m): 8:06pm On Aug 27, 2013
So nobody can help?
Re: Jquery Menu Like The One On Emirates Website by ace1(m): 10:52am On Sep 03, 2013
So Finally found a way through after reading a little more. You can view it from this link http://jsfiddle.net/DmSxE/1/

Here's the updated codes. Please, if there are other and better ways to do this, I'll appreciate if it will be shared. A lot of people can also learn from this. I'll also like someone to optimize it according to best practice. 



<!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>Emirates Menu Attempt</title>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var bannerOverlay = $(".banner_nav > li .overlays"wink,
		banner_li = $(".banner_nav > li"wink;
    bannerOverlay.hide();

    banner_li.click(function(){
		var $this = $(this),
			siblings = $this.siblings(".banner_nav > li"wink,
			$lefty = $this.find(".overlays"wink;
		
		siblings.find(".overlays"wink.hide(function(){
			$(this).css("left","0"wink;
		});
		
		$lefty.show(1, function(){
			$lefty.animate({left: -580});
			$(".overlays"wink.css("opacity","1"wink;		
		});
		
		$("div.close_div"wink.click(function(e){
			var myLIparent = $(this).parents(".overlays"wink;
			myLIparent.css("opacity","0"wink;
			myLIparent.css("left","0"wink;
			e.stopPropagation();
		});
		
	});	
			
});
</script>
<style>
#banner_wrap {
	margin: 20px 0 0 0;
}

#banner {
	height: auto;
	border: 1px solid #f4a76a;
	width: 900px;
	height: 350px;
	margin: auto;
	position: relative;
	z-index: 5;
	overflow: hidden;
}
#banner_menu {
	width: 260px;
	position: absolute;
	right: 20px;
	top: -15px;
	height: 344px;
	background:#EA4706;
	padding: 20px;
	color: #FFF;
}
.banner_nav {
	list-style:none;
	padding:0px;
	margin: 20px 0 0 0px;
	overflow: hidden;
}
.banner_nav > li {
	line-height: 30px;
	text-transform: uppercase;
	font-size: 1em;
	float: none;
}

.banner_nav > li > a {
	color: #FFFFFF;
    display: block;
    font-size: 0.8em;
    padding: 0 15px;
    text-decoration: none;
}

.banner_nav > li > a:hover {
	background: none;
	text-decoration: underline;
}

.banner_nav > li .overlays {
	position: absolute;
	z-index: 25;
	width: 535px;
	background-color: #fff;
	top: 15px;
	left: 0;
	border: 1px solid #e1e1e1;
	height: 318px;
	padding: 20px 20px 10px 20px;
}

.banner_nav > li .overlays .col_3 {
	width: 167px;
	margin-right: 10px;
	border-right: 1px solid #eee;
	float: left;
	height: 290px;
	line-height: 1;
	text-transform: none;
}
/*--- VERTCAL MENU ---*/
.banner_nav > li .overlays .col_3 #v_menu {
	list-style:none;
	padding:0px;
	margin: 0px;
}
.banner_nav > li .overlays .col_3 #v_menu > li {
	line-height: 30px;
	text-transform: uppercase;
	width: 166px;
	font-size: 0.875em;
	float: none;
}
.banner_nav > li .overlays .col_3 #v_menu > li a {
	display: block;
	padding: 0 15px;
	color: #696565;
	text-decoration: none;
}
.banner_nav > li .overlays .col_3 #v_menu > li a:hover {
	color: #696565;
	background: none;
	text-decoration: underline;
}

.close_div {
	color: #000;
}

</style>
</head>
<body>
<div id="banner_wrap">
  <div id="banner"><img src="banner.jpg" width="900" height="350" alt="efghn" />
    <div id="banner_menu">
      <div class="banner_vert_menu">
        <ul class="banner_nav">
          <li> <a href="#">Airlines</a>
            <div class="overlays">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
              <div class="close_div"><a href="#">Close</a></div>
            </div>
          </li>
          
          
          <li> <a href="#">Airlines 2</a>
            <div class="overlays">
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations 2</a></li>
                  <li> <a href="#">Group Travel 2</a></li>
                  <li> <a href="#">Family Travel 2</a></li>
                  <li> <a href="#">Corporate Travel 2</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="col_3">
                <ul id="v_menu">
                  <li> <a href="#">Destinations</a></li>
                  <li> <a href="#">Group Travel</a></li>
                  <li> <a href="#">Family Travel</a></li>
                  <li> <a href="#">Corporate Travel</a></li>
                  <li> <a href="#">Private Jet Travel</a></li>
                  <li> <a href="#">Stopover</a></li>
                  <li> <a href="#">Global Explorer</a></li>
                  <li> <a href="#">Why Book Online?</a></li>
                </ul>
              </div>
              <div class="clear"></div>
              <div class="close_div"><a href="#">Close</a></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
</html>


Re: Jquery Menu Like The One On Emirates Website by nicolas247(m): 6:53am On Sep 04, 2013
Good morning all, can someone please tell me how much can be charge for Web Graphics work Using either jquery ui or boostrap. Thank you

(1) (Reply)

How To Make $150 To $200 A Mounth With Facebook Autopilot Atm Cash / A Must Read Please You Must Save Your Life / [VIDEO] From SQL Injection To Shell II – Detailed Walk-through

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 83
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.