I am trying to hide and show a list from a certain point. But it is not working. I am using jquery .toggle to be able to get this effect but for some reason the list items wont budge. Really need an explanation on this and why it isnt working.
CSS:
div#right-column-sidebar{position: absolute; top: 840px; right: -140px}
div#right-column-sidebar ol{position:absolute; right: 150px;margin:
10px 0 10px 10px; font-size: 20px; color: red;list-style-type:none}
div#right-column-sidebar ol li {list-style-type:none;margin: 10px 0 10px 0; border-
bottom: 1px dotted grey; width: 200px; display: block;}}
div#right-column-sidebar ol li a{font-size: 60%; color: blue;margin-left: 20px}
div#right-column-sidebar ol li:nth-child(11){margin-left:}
div#right-column-sidebar ol li a:hover{text-decoration: underline;}
a.button {
border: 1px solid lightgrey;no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
HTML:
<div id="right-column-sidebar">
<ol>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
<li>Title 6</li>
<li>Title 7</li>
<li>Title 8</li>
<li>Title 9</li>
<li>Title 10</li>
<li>Title 11</li>
<li>Title 12</li>
<li>Title 13</li>
<li>Title 14</li>
<li>Title 15</li>
<li>Title 16</li>
<li>Title 17</li>
<li>Title 18</li>
<li>Title 19</li>
<li>Title 20</li>
</ol>
</div>
<a class="button" href="#"><span>Show more</span></a>
JavaScript:
$('a.button').click( function() {
$('div#right-column-sidebar ol li:nth-child(1n)').toggle();
});
That's all the code and I want to hide and show the list items from a point and further down. And again I want to show them when I click again.
Try this - http://jsfiddle.net/9HXzW/1/
$('div#right-column-sidebar ol li:gt(4)').hide();
$('a.button').on("click", function() {
$('div#right-column-sidebar ol li:gt(4)').slideToggle();
});
This is working fine: http://jsfiddle.net/zn55e/1/. My guess is that you're either not loading jQuery correctly or you weirded yourself out by specifying nth-child(1n) in the Javascript - if you're going for the first item, nth-child(1) is the correct parlance.
PS: close the margin-left line at div#right-column-sidebar ol li:nth-child(11){margin-left:.
Something like this?
http://jsfiddle.net/nickaknudson/fkqgz/
Related
I want to create a list of items and sub items that are connected with lines.
So far I have done this -
ul {
list-style: none;
}
ul.sub-menu {
position: relative;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
li.item span {
position: relative;
}
ul.sub-menu li.item span::before {
content: '';
height: 100%;
width: 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
position: absolute;
bottom: 10px;
left: -10px;
z-index: -1;
}
<ul class="main">
<li class="items">Task 1</li>
<li class="items">Task 2
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span>
<ul class="sub-menu">
<li class="item"><span>Sub Task 1</span></li>
<li class="item"><span>Sub Task 2</span></li>
</ul>
</li>
<li class="item"><span>Sub Task 3</span></li>
</ul>
</li>
<li class="items">Task 3</li>
</ul>
As you can see, Sub Task 3 is not fully connected with its parent. How to connect this?
Note: I saw a question here and gave this as an answer. Then I saw this problem was happening.
I would do it differently like below:
.main {
overflow: hidden;
}
ul {
list-style: none;
padding: 0;
margin-left: 30px;
margin-top: 10px;
}
.item {
position: relative;
line-height: 1.2em;
}
.item::before,
.item::after,
.item:last-child .sub-menu::before{
content: '';
background: #000;
position: absolute;
}
.item::before {
width: 10px;
height: 1px;
top: 0.5em;
left: -10px;
}
.item::after {
left: 20px;
bottom: 0.6em;
top: 1.2em;
width: 1px;
}
/* the bekow will avoid the line to go down if there is no sub task (not transparent!)*/
.item:last-child > .sub-menu::before {
top: calc(0.6em - 1px);
width: 6px;
bottom: 0;
background: #fff;
left: -12px;
z-index: 1;
}
<ul class="main">
<li class="item">Task 1</li>
<li class="item">Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2
<ul class="sub-menu">
<li class="item">Sub Task 1</li>
<li class="item">Sub Task 2</li>
</ul>
</li>
<li class="item">Sub Task 3</li>
<li class="item">Sub Task 4</li>
</ul>
</li>
</ul>
</li>
<li class="item">Task 3</li>
</ul>
I am trying to make a simple dropdown menu using Javascript that slides up and down when the user hovers over the title.
It all works OK as long as the dropdown items are no wider than the title. But I cannot work out how to accommodate wider dropdown items, other than to hard code the width of all the items in the relevant list.
Is there a better way to do this (my code is below).
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$("nav li").hover(
function() {
$(this)
.find("ul>li")
.stop()
.slideDown(400);
},
function() {
$(this)
.find("ul>li")
.stop()
.slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>
In you css where ul li li add width
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px;
}
$(document).ready(function() {
$(document).click(function(event) {
var text = $(event.target).text();
});
$('nav li').hover (
function() {
$(this).find('ul>li').stop().slideDown(400);
},
function() {
$(this).find('ul>li').stop().slideUp(400);
}
);
});
ul {
left: 0;
margin: 0;
padding: 0; /* to prevent the menu indenting - ul has padding by default */
list-style: none;
}
ul li {
float: left;
height: 30px;
line-height: 30px;
text-align: center;
background-color: purple;
width: 100px;
}
ul li a {
color: #fff;
text-decoration: none;
}
ul li li {
background-color: purple;
color: #fff;
text-decoration: none;
display: none;
width: 200px
}
ul li li:hover {
background-color: green;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div>
<nav>
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Extra Extra Wide Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About Us</li>
<li>Contact</li>
<li>FAQ
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Help</li>
</ul>
</nav>
</div>
I am trying to add the functionality of a collapse to my submenu, but no dice yet. I have looked into couple solutions and nothing worked so far.
The issue is that on desktop the menu has a functionality (it opens to the side) and on mobile is suppose to act like a drop down.
Here is some images to help me convey what I am trying to do on mobile:
The first menu is behaving correctly. I want to be like this flyover like dropdown
The Second menu however (green one), I wanted to open like a collapse, showing its sub menus, but still showing the blue menu remaining items below
**Like this **
Here is a fiddle, not sure if you will be able to see the mobile option. Any help would be appreciated.
$('ul.first-menu>li').click(function(event) {
var li = $(this);
var liOld = $('ul.active').parents("li");
var el = (event.target || event.srcElement);
$(el).find('span').toggleClass('arrow-down arrow-up');
if($('ul.active').length!=0){
$('ul.active').removeClass('active').slideUp('fast', function(){
if(li.index() != liOld.index()){
li.children('ul.submenu').slideDown(600).addClass('active');
}
});
}
else{
$(this).children('ul.submenu').slideDown(600).addClass('active');
}
});
if ( $(window).width() < 736) {
var i;
var $acc = $('.has-children');
$acc.click(function(event){
event.stopPropagation();
event.preventDefault();
var el = (event.target || event.srcElement);
console.log('clicked');
$(this).find('ul.submenu').toggle();
$(el).find('span').toggleClass('arrow-down arrow-up');
});
}
.bg-nav {
width: 796px;
display: flex;
background-color: #323232;
}
.bg-nav ul {
background-color: #323232;
padding: 0;
display: flex;
align-items: stretch;
flex-direction: column;
margin-bottom: 0;
width: 80%;
}
.bg-nav ul li {
list-style-type: none;
text-align: center;
border-bottom: .5px solid #ccc;
}
.bg-nav ul li a {
padding: .8rem 1rem;
text-decoration: none;
display: block;
color: #fff;
font-family: 'ArialMT', 'Arial';
font-weight: 400;
font-size: 13px;
}
.bg-nav ul li:hover {
background-color: #2c3e50;
}
.bg-nav ul li a:hover {
color: #fff;
}
.has-children ul, .has-children ul .has-children ul{
display: none;
width: 100%;
position:absolute;
background-color: #fff;
}
.has-children ul li a {
color: #00A2CD;
}
.bg-nav .submenu {
border: 1px solid #ccc;
}
.bg-nav .submenu li {
text-align: left;
}
.bg-nav .submenu li:hover {
background-color: #966ea2;
}
.bg-nav .first-submenu li a:hover,
.bg-nav .first-submenu li a:active,
.bg-nav .first-submenu li a:focus {
color: #fff;
}
.bg-nav .arrow {
font-family: FontAwesome;
float: right;
}
.bg-nav .arrow-down::after {
content: "\f107";
font-size: 16px;
}
.bg-nav .arrow-up::after {
content: "\f106";
font-size: 16px;
}
.bg-nav .arrow-right::after {
content: "\f105";
font-size: 16px;
}
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
.bg-nav {
justify-content: flex-start;
width: 100%;
margin-top: 35px;
}
.bg-nav ul {
width: 100%;
}
.bg-nav ul li {
text-align: left;
border-bottom: .5px solid #ccc;
}
.bg-nav .has-children ul li a {
padding-left: 25px;
}
.bg-nav .has-children ul .has-children ul {
display: none;
}
.bg-nav .first-submenu {
width: 90%;
margin-left: 5%;
}
}
#media only screen and (min-device-width : 736px) {
.bg-nav {
align-items: stretch;
justify-content: center;
height: 36px;
}
.bg-nav .has-children ul li a {
padding-left: 15px;
}
.bg-nav ul {
flex-direction: row;
justify-content: center;
}
.bg-nav ul li {
position: relative;
flex: 1 0;
border-left: .5px solid #ccc;
}
.bg-nav ul li:last-of-type {
border-right: .5px solid #ccc;
}
.bg-nav .submenu li,
.bg-nav .submenu li:last-of-type {
border-left: none;
border-right: none;
}
.bg-nav .has-children ul .has-children ul{
left:100%;
top: 0;
}
.bg-nav .has-children ul {
display:flex;
flex-direction:column;
}
.bg-nav .has-children ul .has-children:hover ul{
display:flex;
flex-direction:column;
}
.bg-nav .submenu .arrow-down::after {
content: "\f105";
font-size: 16px;
}
}
.bg-nav .has-children ul,
.submenu, .first-submenu {
display: none;
}
.arrow {
pointer-events: none;
}
.has-children ul li {
background-color: #f5f5f5;
}
.has-children ul {
display: none;
}
.active {
display: block;
}
.has-children ul li {
background-color: lightblue;
}
.has-children ul li .second-submenu li {
background-color: lightgreen;
}
/** {
outline: 1px solid orange;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bg-nav">
<ul class="first-menu">
<li class="has-children">
<a href="#">Page 1
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li class="has-children">
<a href="#">Menu 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 4
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 5
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 6
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Menu 7
<span class="arrow arrow-down"></span>
</a>
</li>
<li class="has-children">
<a href="#">Menu 8
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu second-submenu">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
<li>Sub Menu 6</li>
<li>Sub Menu 7</li>
</ul>
</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 2
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
</ul>
</li>
<li class="has-children">
<a href="#">Page 3
<span class="arrow arrow-down"></span>
</a>
<ul class="submenu first-submenu" value="hide/show">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</li>
<li>Page 4</li>
</ul>
</div>
I am building jquery vertical menu navigation, there are some links to pages on <li> <a> tags, what i want is that whenever a link is clicked then on page load that sub menu is active and his parent menu is collapsed and others are closed.
<ul id="nav">
<li>Item 1
<ul>
<li>Sub-Item 1 a</li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-Item 2 a</li>
<li>Sub-Item 2 b</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-Item 3 a</li>
<li>Sub-Item 3 b</li>
<li>Sub-Item 3 c</li>
<li>Sub-Item 3 d</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Sub-Item 4 a</li>
<li>Sub-Item 4 b</li>
<li>Sub-Item 4 c</li>
</ul>
</li>
</ul>
and
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scrip>
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
and css stuff,
#nav {
float: left;
width: 280px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li a {
display: block;
padding: 10px 15px;
background: #ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none; // used to hide sub-menus
}
#nav li ul li a {
padding: 10px 25px;
background: #ececec;
border-bottom: 1px dotted #ccc;
}
I want that when user clicks on sub-item 2 a than on that page load the item 2 menu is collapsed opened and others are closed. i have write above code, but not working as i expecting...
here is the Jssfiddle
I have the following menu that has drop-down menus as you can see in the HTML, all the CSS is ready, I tried to make it the Drop-down functional using CSS but it is not really good, so I am trying to do that using JavaScript or something.
I am using this script, but for some reason it is not working, what am I doing wrong?
$("ul#mainMenu li").hover(function () {
$(this).parent().next("ul").show();
});
Here is the HTML
<nav>
<ul id="mainMenu"><!--Main Menu-->
<li class="first">
Home
<ul>
<li>Intro 1</li>
<li>Intro 2</li>
<li>Intro 3</li>
<li>Vision</li>
<li>Contacts</li>
<li>Staff</li>
<li>Use</li>
<li>Crisis</li>
</ul>
</li>
<li>
Basics
<ul>
<li>Definition 1</li>
<li>Definition 2</li>
<li>Definition 3</li>
<li>Assess 1</li>
<li>Assess 2</li>
<li>Assess 3</li>
</ul>
</li>
<li>
Need
<ul>
<li>World 1</li>
<li>World 2</li>
<li>World 3</li>
<li>Polar 1</li>
<li>Polar 2</li>
<li>Polar 3</li>
<li>National 1</li>
<li>National 2</li>
<li>National 3</li>
<li>Alaska 1</li>
<li>Alaska 2</li>
<li>Alaska 3</li>
<li>Alaska 4</li>
<li>Fairbanks</li>
</ul>
</li>
<li>
Models
<ul>
<li>Durkheim</li>
<li>Joiner</li>
<li>NAMI</li>
<li>Mental</li>
<li>Church</li>
<li>Menninger</li>
<li>Weaver/Wright</li>
</ul>
</li>
<li>
Approach
<ul>
<li>Trees 1</li>
<li>Tress 2</li>
<li>Goals 1</li>
<li>Goals 2</li>
<li>Training 1</li>
<li>Training 2</li>
<li>Gas 1</li>
<li>Gas 2</li>
<li>Boat 1</li>
<li>Boat 2</li>
</ul>
</li>
<li>
Library
<ul>
<li>Stories</li>
<li>Books</li>
<li>Plays</li>
<li>Epics</li>
<li>Movies</li>
<li>Articles</li>
</ul>
</li>
<li>
Web
<ul>
<li>Arctic</li>
<li>National</li>
<li>Supports</li>
<li>Reference</li>
</ul>
</li>
</ul>
</nav>
CSS:
/*Main Menu*/
#mainMenu {
width: 750px;
display: inline-block;
position: relative;
cursor: default;
}
#mainMenu li {
display: inline-block;
}
#mainMenu li:before{
content: "|";
color: #606060;
margin-right: 4px;
}
#mainMenu li:first-child:before{
content: '';
}
#mainMenu a {
color: #F2F2F2;
padding: 15px 20px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
-webkit-transition: background 0.2s linear;
-moz-transition: background 0.2s linear;
-ms-transition: background 0.2s linear;
-o-transition: background 0.2s linear;
transition: background 0.2s linear;
}
#mainMenu a:hover {
color: #C7A17B;
background-color:rgba(51,51,51,0.5);
}
#mainMenu a.active {
color: #94877B;
cursor: default;
}
/*Drop Down Menu*/
ul#mainMenu ul {
display: none;
background: #303030 url('../elements/texture.png') repeat;
border: 1px solid #272626;
position: absolute; top: 50px; right: 0; left: 0;
padding: 10px;
border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-webkit-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 25px -1px rgba(0,0,0,0.3);
}
ul#mainMenu li ul li a {
color: #E5E5E5;
padding: 10px;
margin: 2px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#mainMenu li ul li a:hover {
background-color:rgba(71,71,71,0.3);
}
See you have to find ul in this where this belongs to hovered li:
$("ul#mainMenu li").hover(function () {
$("ul",this).show(); // <--show the ul in this li
});
Try this and see if it solves the issue.
using .find():
$("ul#mainMenu li").hover(function () {
$(this).find("ul").show(); // <--show the ul in this li
});
make change to your code below one
$("ul#mainMenu li").hover(function () {
$("ul",this).show();
});