I have placed my code in http://jsfiddle.net/ChvjL/4/
While the mouse pointer is upon Link1 then the sub links link1a, link1b, link1c should appear.
Similarly for Link2 also.
Can anyone help me in resolving this
Thanks in advance
Amith
Here is an idea how it should be in your case:
html
<ul>
<li>Link1
<ul>
<li>Link1a</li>
<li>Link1b</li>
<li>Link1c</li>
</ul>
</li>
<li>Link2
<ul>
<li>Link2a</li>
<li>Link2b</li>
<li>Link2c</li>
</ul>
</li>
</ul>
Css
ul > li { width:100px; float:left; }
ul > li > ul { display:none; }
ul > li:hover > ul { display:block; }
ul > li > ul { padding-left:10px; }
Code http://jsfiddle.net/ChvjL/10/
Are you trying to say that when a person hovers at the link given, another link will be shown?
You can refer to this example. It's similar. You just need change the content:
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
Related
I have two navigation boxes where first one has a CSS Class .one and Second one is blank. For first navigation box, I given a border with JavaScript by detecting the class name .one. But I getting border for second navigation box too eventhough it don't have a class. Here i use template literals approach. I know that i can fix this using class name directly inside the querySelectorAll method as follows let li = document.querySelectorAll(".one > ul li");. But I need template literals solution which is most usefull for me to use some other projects too. Mainly i need to represent class name as a variable. Following is my code. Can anyone help me on this. Thanks in Advance!
let parents = document.querySelector(".one");
let li = document.querySelectorAll(`${parents.tagName} > ul li`);
li.forEach((elem)=>{elem.style.border="1px solid red"});
nav {font-family:arial;width:15rem;}
nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
nav ul a {color:#777;text-decoration:none;padding:.5rem;}
<nav class="one">
<ul>
<li>Home</li>
<li>About
<ul>
<li>Vision</li>
<li>Mission</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<br>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Try replacing this line:
let li = document.querySelectorAll(`${parents.tagName} > ul li`);
with this one:
let li = parents.querySelectorAll(`ul li`);
The reason it doesn't work for you as you expected, is because you are matching all the elements with the query selector nav > ul li within the document, and you are completely ignoring the class name of the nav tag you have selected in parents variable.
Otherwise, you can simply do this instead:
let li = document.querySelectorAll(`.one > ul li`);
li.forEach((elem)=>{elem.style.border="1px solid red"});
or just use the CSS:
.one > ul li {
border: 1px solid red;
}
or if you want to select the first element (I don't know what are your intentions, but I'm guessing according to your code):
.one:first-child > ul li {
border: 1px solid red;
}
Don't need JavaScript. It can be possible by only CSS.
.one > ul > li { border: 1px solid red}
or in your JS change
let li = document.querySelectorAll(`${parents.tagName} > ul > li`);
I have this snippet of html
ul { display:none }
test 1
test 2
test 3
<ul class="hh-ul-1 mm-listitem">
sub 1
</ul>
Test 4
<ul class="hh-ul-1 mm-listitem">
sub 2
</ul>
By default ul elements are hidden.
I'm trying to achieve when the a element is hovered to show only ul element which is the next sibling.
For example, if test 3 link has hovered, the ul element with sub 1 link needs to show up and to stay while the a and ul are hovered.
I'm not so experienced, so any help would be appreciated.
Have a look at adjacent sibling combinator
I add focus so you can keep the UL open
Also the a in the UL should be in an li. That makes it somewhat harder to make a sub-sub menu
ul { display:none; position: absolute; top:50px }
a:hover + ul { display: block }
a:focus + ul { display: block }
test 1
test 2
test 3
<ul class="hh-ul-1 mm-listitem">
<li>sub 1</li>
</ul>
Test 4
<ul class="hh-ul-1 mm-listitem">
<li>sub 2</li>
</ul>
I am struggling with one of my dropdowns.
Currently it is set up to be triggered by an i tag to drop down the sub menu.
$('nav li i').click(function() {
I want to change it to (nav li a) so it is not the icon that has to be pressed
I also have the code:
var child = $(this).index('nav ul li i');
but i am not sure what to change this to?
You can see all the code in jsfiddle.
http://jsfiddle.net/susannalarsen/VNYAx/
Since I do not see the <a> element anywhere, I have changed the <i> to <a> for demonstration purposes. You can see the example on http://jsfiddle.net/VNYAx/3/
Basically I changed
$('nav li i').click(function() {
to
$('nav li a').click(function() {
And also
var child = $(this).index('nav ul li i');
to
var child = $(this).index('nav ul li a');
Is this what you need?
Instead of using the index of the icon as a way to identify which dropdown you want to slide down, you can save a reference to that dropdown by searching for '.dropdown' within the element clicked.
$('nav li').click(function () {
var $childDropdown = $(this).find('.dropdown');
if ($childDropdown.is(':visible')) {
$('.dropdown').slideUp(300);
} else {
$('.dropdown').slideUp(300);
$childDropdown.slideDown(300);
}
});
http://jsfiddle.net/9Fk7j/2/
Just an alternative approach to this problem using .slideToggle(). If you need anything explaining please comment and I will edit the answer. I have commented the JavaScript below. I also removed the extra <div> in the markup as the nested <ul> is a perfectly good container.
Demo
HTML
<nav id="moo">
<ul>
<li>Item A
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li>Item B
<ul>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
</ul>
</nav>
CSS
ul {
padding: 0;
margin: 0;
}
li {
display: inline;
}
nav li {
position: relative;
}
ul ul {
display: none;
position: absolute;
border:1px solid #ccc;
padding: 10px;
}
ul ul li {
display: block;
}
JavaScript
var $allSubMenus = $('ul ul'); // handle to all submenus
$('nav li a').click(function (e) {
var $li = $(this).closest('li'); // get parent <li> of the <a> clicked on
var $subMenu = $li.find('ul'); // get our submenu
$allSubMenus.not($subMenu).slideUp(300); // hide all other submenus
$subMenu.slideToggle(300); // show our submenu
e.stopPropagation(); // stop event bubbling further
});
$(document).click(function () {
$allSubMenus.hide(); // no need to reselect, just use handle
});
HTML
<div id="gadget">
<span id="nav_up">UP</span>
<ul>
<li>LIST1
<ul>
<li>Child1.1</li>
<li>Child1.2</li>
</ul>
</li>
<li>LIST2
<ul>
<li>>Child2.1</li>
</ul>
</li>
<li>LIST3
<ul>
<li>>Child3.1</li>
</ul>
</li>
</ul>
<span id="nav_down">Down</span>
</div>
CSS
#gadget{width:75px; height: 100%;}
#gadget ul{height:450px; width:100%; overflow:hidden;}
#gadget ul li ul{display:none;}
#gadget ul li:hover ul{display:block;}
JS
$('#nav_down').click(
function () {
$('#gadget ul').animate({scrollTop: '100px'}, 800);
}
);
$('#nav_up').click(
function () {
$('#gadget ul').animate({scrollTop: '0px'}, 800);
}
);
Here on click <span> up and down the gadget <ul> moves up and down according to the overflow.
But when overflow:hidden is applied the child <ul> is not showing. And when I remove it child <ul> shows but the <span> scroll dosenot work. How can i solve this?
I believe the problem is all of your ULs are height:450px, would applying the height to only the top element solve the problems?
#gadget > ul{height:450px; width:100%; overflow:hidden;}
Your nested ul needs to be absolutely positioned and for proper scrolling grab the body element and apply the animate method http://jsfiddle.net/PJ3gp/
#gadget ul li ul{display:none;position:absolute;}
Add position:absolute to child elements
Right now I have a pure HTML CSS navigation bar with some dropdowns. However on ipad the hover will obviously not work.
I want to add a click event to the relevant menu items so the dropdown will also activate with an onclick event.
I've look at other answers but I'm not capable of reading javascript well enough so that I can modify them for my specific site.
here is a link to where I'm at now: http://2ftrade.nl/kareem/eindopdracht/
and this is the relevant html. In my css the default is display:none for the dropdown menus and is changed to display:block when hovered over the li that contains it.
<ul>
<li>Home</li>
<li><a title="">Opleiding</a>
<!-- the dropdown -->
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
</li>
<li>Onderwijsprogramma</li>
<li>Organisatie</li>
<li><a title="">Stages en Projecten</a>
<!-- another dropdown -->
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</li>
<li>Top</li>
</ul>
This is the css that hides the dropdown section
nav > ul > li > ul {
display: none;
position: absolute;
}
and this is what will display it when hovering
nav > ul > li:hover ul {
display: block;
}
you can attach event listener to your element:
var dropdown_button = document.getElementById('#your-button-that-activates-dropdown');
dropdown_button.addEventListener('click', function() {
//here do what you want to do when the button is clicked.
}, false);
you should use javascript events , some thing like this :
var btn = document.getElementById('btn') // this button is a key to run what you want
var drp = document.getElementById('drp') // this is your dropdown list
btn.onclick = function()
{
drp.style.display = 'block'
// other codes . . .
}
You can achieve this without using javascript.
Use the :target selector
example
Add an id and href for each target in the html
<ul>
<li>Home</li>
<li id="Opleiding">
<a title="" href="#Opleiding">Opleiding</a>
<!-- the dropdown -->
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
</li>
<li>Onderwijsprogramma</li>
<li>Organisatie</li>
<li id="StagesenProjecten">
Stages en Projecten
<!-- another dropdown -->
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</li>
<li>Top</li>
</ul>
in the css specify the style for the :target
nav > ul > li:target ul {
display: block;
}
nav > ul > li:hover ul {
display: block;
}
nav > ul > li > ul {
display: none;
position: absolute;
}