DropDown Menu Display Issue - javascript

What I want to do in my website is to have the following code displayed just like its appears but with a timeout for closing the menu when hovering over a menu section (at the bottom is the problematic code).
This is what I achieved without having any troubles (but without the timeout when hovering over the menu sections)
CSS:
.menu
{
list-style:none;
position:relative;
}
ul.menu ul
{
list-style:none;
display:none;
position:absolute; /* To be the position relative to <li> that contains the <ul> */
left:5em; /* So there is no overlaping over <li> */
top:-1em;
}
ul.menu li:hover > ul
{
display:block;
}
HTML:
<ul class="menu">
<li>Equipos
<ul>
<li>Masculinos
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</li>
<li>Femeninos
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</li>
</ul>
</li>
<li>Categorias
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</li>
<li>Torneos
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</li>
<li>Canchas
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</li>
<li>Resultados</li>
<li>Posiciones</li>
<li>Estadisticas</li>
<li>Boletines ATS</li>
<li>Arbitros y Designaciones</li>
</ul>
And the problem:
CSS:
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto;}
#navigation_horiz ul {height:50px; display:block;background:blue}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_horiz ul li #dropdown_style {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_style a {color:red}
HTML:
<div id="navigation_horiz">
<ul>
<li>
Equipos
<div class="dropdown" id="dropdown_style">
Masculinos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</div>
Femeninos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</div>
</div><!-- .dropdown_menu -->
</li>
<li>
Categorias
<div class="dropdown" id="dropdown_style">
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Torneos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Canchas
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Resultados
</li>
<li>
Posiciones
</li>
<li>
Estadisticas
</li>
<li>
Boletines
</li>
<li>
Arbitros y Designaciones
</li>
</ul>
</div><!-- #navigation_horiz -->
JavaScript:
(function($)
{
$.fn.naviDropDown = function(options)
{
//set up default options
var defaults={
dropDownClass: 'dropdown', //the class name for your drop down
dropDownWidth: 'auto', //the default width of drop down elements
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
slideDownDuration: 500, //easing duration for slideDown
slideUpDuration: 1000, //easing duration for slideUp
orientation: 'vertical' //orientation - either 'horizontal' or 'vertical'
};
var opts = $.extend({}, defaults, options);
return this.each(function()
{
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal')
{
$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
}
if(opts.orientation == 'vertical')
{
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
}
$this.find('ul').hoverIntent(function() {}, hideDropDown);
$this.find('li').hoverIntent(getDropDown, function() {});
});
var activeNav = null;
function getDropDown()
{
var newActiveNav = $(this);
if (activeNav && activeNav.get(0) !== newActiveNav.get(0))
{
hideDropDown();
}
if (!activeNav)
{
showDropDown(newActiveNav);
}
activeNav = newActiveNav;
}
function showDropDown(newActiveNav)
{ newActiveNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
function hideDropDown()
{
if (activeNav)
{ activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
activeNav = null;
}
}
};
})(jQuery);
$(document).ready(function()
{
$('#navigation_horiz').naviDropDown({dropDownWidth: '300px'});
});
Were am I messing up the code and how could I make it work or how to fix it?

At last I only got closed the threat and they told me a lot of stuff I made wrong by posting but still no help. To many days past through and I managed to help other people and myself with problems we all have and with my tiny easy problem nobody got even interested...
I suggest the community and the administrators of this site to clarify yourselves how to improve this in order to get it working the way it should, otherwise do not be so harsh on the people that post things like I did or change the theme of the website from "Stack Overflow is a question and answer site for professional and enthusiast programmers." to "Stack Overflow is a question and answer site for professional" since you give not even a clue to some easy topics.
Sincerely, Martin
P.S.: I post this to generate self conscience of the real problem of the site in order to improve it, do not mean to get anyone furious.

Related

togggle menu need to open on click and close itself when click the other menu

How can make it make
1- open toggle menu when on click menu (not opened by default)
2- close itself - if click other parent menu
trying to make it work for the project
and i copied from cssdesk
$('.inbox li').click(function(e) {
$('.inbox li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
$(document).ready(function () {
$('.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" class="cssdeck">
<ul class="inbox-nav nav" style="border-top: 1px solid #eef1f5; margin-top:10px;" >
<li class="">
<a href="javascript:;" id="fldr3">menu 1
</li>
<li class="">
<a data-title="Inbox" data-type="important" href="javascript:;">2nd Menu</a>
</li>
<li class="">
<a data-title="Sent" data-type="sent" href="javascript:;">menu2</a>
</li>
<li class="divider"></li>
<li class="active tree-toggler">
Toggle menu</li>
<ul class="nav nav-list tree">
<li class="">Link</li>
<li class="">Link</li>
</ul>
</li>
</ul>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
If user click is not neccesary you can do it by CSS, this is an example the 4th menu item has sub menu items
.menu,
.menu-item {
display: inline;
cursor: default;
}
.menu-item.has-subItem {
position: absolute;
}
.menu-item ul {
display: none;
position: absolute;
top: 15px;
left: 0;
padding: 0;
}
.menu-item:hover ul {
display: inline;
}
<ul class='menu'>
<li class='menu-item'>Item 1</li>
<li class='menu-item'>Item 2</li>
<li class='menu-item'>Item 3</li>
<li class='menu-item has-subItem'>Item 4
<ul>
<li class='sub-item'>sub 1</li>
<li class='sub-item'>sub 2</li>
<li class='sub-item'>sub 3</li>
</ul>
</li>
</ul>
In your $('.inbox li').click() function use jquery's .hide() function on the ul.tree element. Since .hide() won't do anything if the element is already hidden, you don't need to check if it needs to be hidden.
(Similarly, you can pull the $this.addClass('active'); statement out of the if, since it simply won't do anything if the class is already added!)

How to show/hide when hover in/out on specific element

I make a secondary menu and I like it to be displayed when user hover a specific one of the main menu items....
I tried this code but it didn't work...
.second-menu {display:none}
ul li #2:hover + .second-menu {display:block}
<ul>
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
any suggestions?....
only by css or javascript....
If you wish to use CSS, you will have to put your sub menu inside the element that you want to hover.
For the CSS, C.Raf.T's answer is perfect.
If for some reason you want to use javascript you could do something like this
document.getElementById('2').addEventListener('mouseenter', function ()
{
document.getElementById('subMenu').style.display = "block";
});
document.getElementById('2').addEventListener('mouseleave', function ()
{
document.getElementById('subMenu').style.display = "none";
});
Note: the above code requires you to add a "subMenu" id to the div containing your menu. If you wish to display serval menus with only one hover event, use a class instead.
But honestly, the CSS answer is the best way to go if all you need is nested sub menus.
If the sub menu has to be outside of the parent, you will need the javascript.
.second-menu{
display:none;
}
li:hover >.second-menu{
display:block;
}
<ul>
<li id="1">first</li>
<li id="2">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="3">third</li>
<ul>
Answer using Javascript,
document.getElementById('hover').onmouseover = function(){
document.getElementById('second-menu').style.display = 'block';
}
document.getElementById('hover').onmouseout = function(){
document.getElementById('second-menu').style.display = 'none';
}
.second-menu{
display:none;
}
<ul id="hover">
<li id="1">first</li>
<li id="2">second</li>
<li id="3">third</li>
<ul>
<div class="second-menu" id="second-menu">
<ul>
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</div>
Here is a fiddle
By using pure CSS you have to ensure that your submenu (.second-menu) is a child-node of your hovered HTML-Element. Because CSS unfortunately doesn't know a parent selector.
By using JS you are more flexible. Means placing the submenu wherever you wish.
* { margin: 0; padding: 0; }
.second-menu {display:none; border: 1px solid blue; width: 100%; position: absolute; left: 0; right: 0; }
ul li#two:hover > .second-menu {display:block}
.relative { position: relative; border: 1px solid black; }
li { display: inline-block; }
<ul class="relative">
<li id="one">first</li>
<li id="two">second
<ul class="second-menu">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
</li>
<li id="three">third</li>
<ul>

How to select a group with its parents & child in Jquery multiselect

Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child,
So if i select a group all the parent & child in the group should have be moved with the group,So help me....
Here is my example code
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var me = jQuery || $.noConflict();
me(document).ready(function() {
if((me('ul li ul li ul li').children().length) == 0 ) {
me('ul li ul li ul li').addClass("list");
}
me('ul li ul li').click(function() {
me('ul li ul li').removeClass("list_state");
if((me(this).children().length) > 0 ) {
me(this).addClass("list_state");
me('.list_state').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
}
});
me('li.list').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
});
</script>
<ul>
<li id="level-0">India
<ul>
<li id="level-0-3">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1">United Kingdom
<ul>
<li id="london">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option
I have attached an example screenshot below..
Check this fiddle
In the above fiddle only the text within clicked li and its successor li's will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par" to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}

How to add on click a li element to another container and rest of li stay fixed

I have a litle problem:
I have this list:
<ul id="nextlevel">
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="01.Hi tech (028_003)" data-titlu="Hi tech" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Hi tech<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 16:07:14</p></a>
<ul class="detalii-produs hide">
<li class="togo">Image 1</li>
<li class="detalii-produs-lista dropdown-submenu">Fișă produs
</li>
<li class="detalii-produs-lista dropdown-submenu">Listă prețuri
</li>
</ul>
</li>
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="02.Net (028_002)" data-titlu="Net" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Net<p style="width:100%;color:#828282;font-size:70%" class="muted">Marti, 16 Apr 2013 09:53:43</p></a>
<ul class="detalii-produs hide">
<li class="togo">Image 2</li>
<li class="detalii-produs-lista dropdown-submenu">Fișă produs
</li>
<li class="detalii-produs-lista dropdown-submenu">Listă prețuri
</li>
</ul>
</li>
<li class="listadetalii "><a style="width: 100%; color: red; font-weight: 600; cursor: pointer; outline: medium none;" rel="03.Accessories" data-folder="03.)" data-titlu="Cuiere" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Cuiere<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 10:53:47</p></a>
<ul class="detalii-produs hide" style="display: none;">
<li class="togo">Image 3</li>
<li class="detalii-produs-lista dropdown-submenu">Fișă produs
</li>
<li class="detalii-produs-lista dropdown-submenu">Listă prețuri
</li>
</ul>
</li>
This list is collapsed. When i click on "Hi tech" a next list is expanded and the content is visible.
I want the content of the li element class togo to go on div alfa and hide li and the rest of li-s stay on this list.
Same behavior for the rest of elements Net, Cuiere...
<div id="alfa">here must be Image (n)</div>
More detalied code on fiddle http://jsfiddle.net/gxg1974/Jy3EK/
Thank you all for tips and guidance.
For what i understand is, you want the content of togo to be in div#alfa. So here's how to do it..
$('ul#nextlevel a.singlelink').on("click", function () {
$(this).css('outline', 'none');
if ($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow', function () {
$(this).parent().removeClass('current');
});
} else {
var img = $(this).siblings('ul').children("li.togo").hide()
.html();
console.log(img);
$("#alfa").html(img);
$('ul#nextlevel li.current ul').slideUp('slow', function () {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow', function () {
$(this).parent().toggleClass('current');
});
}
return false;
});
DEMO FIDDLE
UPDATE
I've used .on instead of live as .live() is deprecated.
If there's something more, let me know.

highlight currently selected link in css menu bar

I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1
And the below content to work as a simple css menu bar.
<div class="menu_div">
<ul>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
CSS styling is
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.
I'm using django framework.
Try this jQuery code, it will add the class automatically
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
In your CSS you have a class with the id 'active', this should probably be a class like this:
.menu_div ul li.active
{
background:blue;
}
Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.
Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this:
<li class="active"> l1c1 </li>
Replace your id #active to class .active - that is more right way:
.menu_div ul li.active
{
background:blue;
}
and add this class to active element in your list:
<div class="menu_div">
<ul>
<li class="active"> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
.menu_div ul li#active
It says the active link needs an id of active. I see no id, hence why it is not blue.
If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.
Just
css
.menu_div ul li.active{background:blue}
html
<div class="menu_div">
<ul>
<li id="page1"> l1c1 </li>
<li id="page2"> l1c1 </li>
<li id="page3"> l1c1 </li>
<li id="page4"> l1c1 </li>
</ul>
</div>
script
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>

Categories

Resources