[Help] Horizontal Hover Menu Problem [Help]

[Toxic998]

Hey guys,

So i'm working on a small project, and am having trouble with a menu.
It works great, except for one small problem. When i hover over one of the tabs, all of the sub listings show up for all of the tabs, not just the one i select. Any idea how i can fix this??

CSS of the Menu

.addthis_toolbox .custom_hover {
    position: relative;
}

.addthis_toolbox .custom_hover .custom_button {
    font-weight: bold;
    padding: 6px 12px 6px 12px;
    color: #00bff3;
    cursor: pointer;
    -moz-border-radius: 5px 5px 0 0;    
    -webkit-border-radius: 5px 5px 0 0;
}

.addthis_toolbox .custom_hover .custom_button.active {
    background-color: #eee;
}

.addthis_toolbox .hover_menu  {
    display: none;
    position: absolute;
    background: #fff;
}

.addthis_toolbox .custom_hover .tower {
    -webkit-border-radius: 0 5px 0 0;   
    -moz-border-radius-topleft: 0;
    
}
.addthis_toolbox .hover_menu  {
    width: 136px;
    padding: 1px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	
}

.addthis_toolbox .hover_menu a {    
    position: relative;
    display: block;
    width: 102px;
    padding: 4px 0 4px 34px;
    text-decoration: none;
    color: #00bff3;
}

.addthis_toolbox .hover_menu a:hover {    
    background: #f5f5f5;
    color: #027999;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.addthis_toolbox .hover_menu span {
    position: absolute;
    left: 1004px;
    top: 4px;
}

.addthis_toolbox .hover_menu .more {
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
}

.addthis_toolbox .hover_menu .more a {
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .hover_menu .more a:hover {
    background: none;
}
.addthis_toolbox .hover_menu .more span {
    display: none;
}

HTML of the Menu

			<table border="0">

<tr>
<td>			
			<?php if(mysql_result(mysql_query("SELECT rank FROM users WHERE id = '" . $_SESSION['user']['id'] . "'"), 0) >= 5)
			{ ?>
						<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Player Management</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='vip'>Give VIP</a>
			<a href='edit'>Edit a User</a>
        </div>

    </div>
</div>
</td>
<td>
</td>

<td>
			
					<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Administration</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='news'>Post News Article</a>
			<a href='delnews'>Delete News Article</a>
			<a href='cmdlogs'>Command Logs</a>
			<a href='motd'>Change Welcome Message</a>
			<a href='timer'>Change Currency Timer</a>
        </div>

    </div>
</div>

</td>
<td>
</td>
<td>

<?php } if(mysql_result(mysql_query("SELECT rank FROM users WHERE id = '" . $_SESSION['user']['id'] . "'"), 0) >= 4) { ?>		
		<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Moderation</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='banlist'>Ban List</a>
			<a href='ip'>IP Lookup</a>
			<a href='unban'>Unban a User</a>
			<a href='addban'>Ban a User</a>
	    </div>

    </div>
</div>

</td>
<td>
</td>
<td>

		<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Catalogue</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='pages'>List Pages</a>
			<a href='addcata'>Add Cata Items</a>
			<a href='editcata'>Edit Cata Items</a>
			<a href='addfurni'>Add Furniture</a>
			<a href='editfurni'>Edit Furniture</a>
	    </div>

    </div>
</div>

</td>
<td>
</td>
<td>

<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Bots</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='bots'>List Bots</a>
			<a href='addbot'>Add Bots</a>
			<a href='editbot'>Edit Bots</a>
	    </div>

    </div>
</div>

</td>
<td>
</td>
<td>

<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Badges</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <!--<a class="addthis_button_email">Email</a>-->
			<a href='listbadge'>List Badges</a>
			<a href='addbadge'>Add a Badge</a>
			<a href='delbadge'>Delete a Badge</a>
	    </div>

    </div>
</div>			
		
</td>
</tr>	
</table>

JS of the Menu

  <script src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var delay = 400;
    
    function hideMenu() {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden')) {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
    
    $('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
    }).mouseleave(function() {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
    });    
    
});
</script>

Please do what you can.

 

[holthelper]

5. Don't just dump your problem and hope we sort it out for you!
Coders section is not a general 'I need something fixed so lets ask you guys to fix it for me' forum! If you have a specific problem, for instance a typecast that's giving you trouble or a regex that's not working correctly, feel free to ask. But do not dump here 50 lines of code with the message 'its not working, fix please', or expect us to write your scripts for you!

http://forum.ragezone.com/f144/rules-general-info-180546/
kthxbi

 

[Toxic998]

http://forum.ragezone.com/f144/rules-general-info-180546/
kthxbi

I'm not asking anyone to fix the code.
I said can anyone give me an idea of how to fix.
I just thought that to be fixed, somone would need too look at the structure of how I have made it.

 

[s-p-n]

put the problem parts of this on jsfiddle so we can see what the code is doing. This is a reason you shouldn't mix PHP code inside of HTML code. There is a principle we developers follow. That is, never place control code inside of template logic. This goes for PHP and JavaScript code in terms of web development.

 

[Chris]

I'm not asking anyone to fix the code.
I said can anyone give me an idea of how to fix.
I just thought that to be fixed, somone would need too look at the structure of how I have made it.

I think he was moreso referring to the part about dumping code.

It also helps to have a visual representation of what's going wrong. We have no idea what you want it to look like, or what it actually looks like.

Although, since the problem you listed is pretty simple, my first instinct is to check the function that is triggering the menus to show.

$('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
}).mouseleave(function() {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
});

With this, you're telling it that when you hover over a button, fade in all the elements with the "hover_menu" class.

By using Jquery's "find" function (a function that finds the first decedent within the selector parameters), I was able to fix your fadeIn function. I switched the selector to target the container of the entire nav item, so you're able to use $(this) to select both the button and the menu with the "find" function.

$('.addthis_toolbox').mouseenter(function() {
    $(this).find('.hover_menu').fadeIn('fast');
    $(this).find('.custom_hover').addClass('active');
    $(this).data('in', true);
    $(this).find('.hover_menu').data('hidden', false);
}).mouseleave(function() {
    $(this).data('in', false);
    setTimeout(hideMenu, delay);
});

I'm not sure what you're using .data for, so I left the statements using data alone. Try this out and let me know if it works.

 

[Toxic998]

I think he was moreso referring to the part about dumping code.

It also helps to have a visual representation of what's going wrong. We have no idea what you want it to look like, or what it actually looks like.

Although, since the problem you listed is pretty simple, my first instinct is to check the function that is triggering the menus to show.

$('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
}).mouseleave(function() {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
});

With this, you're telling it that when you hover over a button, fade in all the elements with the "hover_menu" class.

By using Jquery's "find" function (a function that finds the first decedent within the selector parameters), I was able to fix your fadeIn function. I switched the selector to target the container of the entire nav item, so you're able to use $(this) to select both the button and the menu with the "find" function.

$('.addthis_toolbox').mouseenter(function() {
    $(this).find('.hover_menu').fadeIn('fast');
    $(this).find('.custom_hover').addClass('active');
    $(this).data('in', true);
    $(this).find('.hover_menu').data('hidden', false);
}).mouseleave(function() {
    $(this).data('in', false);
    setTimeout(hideMenu, delay);
});

I'm not sure what you're using .data for, so I left the statements using data alone. Try this out and let me know if it works.

I had to make a few small modifications, but it really helped me out.
Thanks for the help.
I'm not really that great with javascript lol.

Repped you up