CODEWITHSUNDEEP
jquerycss
user836910
user836910

Reputation: 484

create a jquery rollover navigation

My aim is to create a navigation menu using jquery. when the user rollover over left1, right 1 should appear and so forth. I am trying to code this in jquery but i am a little tied up. please assist

css

.left {
background: #fff;
padding: 10px;
width: 200px;
border: 1px solid #ccc; 
position:relative

}
.right{
background:aqua; 
 height:270px;
width:200px; 
float:right; 
visibility:hidden

}

html 

 <div class="left" id="left1">left 1</div>
 <div class="left" id="left2">left 2</div>
 <div class="left" id="left3">left 3</div>
 <div class="left" id="left4">left 4</div>

<div class="right" id="r1">right 1</div>
<div class="right" id="r2">right 2</div>
<div class="right" id="r3">right 3</div>
<div class="right" id="r4">right 4</div>

jquery

$(document).ready(function(){ 
function rightFrame(){
$('#r1').css({
        'position':'absolute',
        'top':'40px',
        'left':'300px',
        'visibility':'visible'  
        }); 
$('#r1').show();

}
$('#left1').mouseover(function(e){ 
 $("#left"+ID).css('background','red'); 
}); 
$('.left').mouseout(function(e){ 
$('.right').hide(); 
}); 
});

my question may seem a little off but i hope you can understand my aim. thanks

Upvotes: 0

Views: 244

Answers (3)

SVS
SVS

Reputation: 4275

Here is a method of doing this with jquery: http://jsfiddle.net/surendraVsingh/h4wsS/6/

Jquery:

$('.left').hover(function(){
  var x = ($(".left").index(this))+1;
  var rx = '#r'+x;
  $(rx).toggle();

});​

CSS: Removed visibility:hidden & added display:none. 

.right{
   background:aqua; 
   height:270px;
   width:200px; 
   float:right; 
   display:none;
}​

Upvotes: 0

honyovk
honyovk

Reputation: 2747

You have a few fundamental problems here.

  1. ID is undefined.
  2. You have a function named rightFrame() but you are not calling it anywhere in the script.
  3. You should use classes and $(this) to open and close menu items instead of IDs.

Here is a Fiddle to show you an easy fix: http://jsfiddle.net/PFnDe/1/

EDIT: I guess I should post my JS here too.

function rightFrame(e) { // Moved this outside of DOM ready function.
    $('#' + e).css({
        'position': 'absolute',
        'top': '40px',
        'left': '300px',
        'visibility': 'visible'
    });
    $('#' + e).show();
}

$(document).ready(function() {
    $('.left ').mouseover(function(e) {
        rightFrame($(this).data('item')); // Added this
        $(this).css('background-color', 'red');
    });
    $('.left ').mouseout(function(e) {
        $('.right ').hide();
        $(this).css('background-color', '#fff'); // Added this
    });
});

Upvotes: 1

sachleen
sachleen

Reputation: 31131

Something like this?

$(".left").hover(function() {
    var id = $(this).attr('id').match(/\d+$/);
    $("#r" + id).css({'visibility':'visible'});
}, function() {
    $(".right").css({'visibility':'hidden'});
});​

DEMO

Upvotes: 2

Related Questions