I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap), i've now run into a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated, i'm sure its just a simple overwriting syntax, but i can't be too sure, whether it's that or if it's a scripting problem.
Thank you.
Related
My organization chart has testing and developing teams. One employee(Tester) is working in both teams so I would like to combine developing team tree to testing team tree. I worked out this but no use please help me
HTML
<div class="tree">
<ul id="testing">
<li parent-id=0 emp-id=1>Rao</li>
<li parent-id=1 emp-id=2>Venkat</li>
<li parent-id=2 emp-id=3>Ragava</li>
<li parent-id=3 emp-id=4>Basha</li>
<li parent-id=3 emp-id=5>Tester1</li>
<li parent-id=5 emp-id=6>Tester1a</li>
<li parent-id=5 emp-id=7>Tester1b</li>
</ul>
<ul id="development">
<li parent-id=0 emp-id=8>Vengal</li>
<li parent-id=8 emp-id=9>Naren</li>
<li parent-id=9 emp-id=5>Tester1</li>
</ul>
</div>
JQUERY
var $ul = $('ul');
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('emp-id') + ']').wrapAll('<ul />').parent().appendTo(this)
});
for complete view see the DEMO
I've got an html menu as below...
<ul class="menu" id="menu">
<ul class='section' id='section_1'>
<li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span>
<ul>
<li id='exhibit_1' class='exhibit_title'> → Introduction
</li>
<li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> → Deriving functions</a>
</li>
<li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> → Exploiting odds</a>
</li>
<li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> → Betting history</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_2'>
<li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span>
<ul>
<li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_5'>
<li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span>
<ul>
<li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a>
</li>
<li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a>
</li>
<li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a>
</li>
</ul>
</li>
</ul>
<ul class='section' id='section_4'>
<div class='bot'>
<p>twitter
<br />
facebook
</p>
</div>
</ul>
</ul>
It's composed of several "sections" which house links (relevant to the section). Each section has a main title (e.g. Against the odds.) and several sub-sections (which are stored in another ul) like "deriving functions". The subsections are set to display: none by default (I have jQuery which opens the sub-sections if the user wishes to).
The problem:
Once the user clicks on a sub-section link (e.g. www.themathsproject.co.uk/against-the-odds/deriving-functions), I want the sub-section which houses the link (in the case id=section_1) to be open on the page reload so that the user can easily navigate to other links in the section. The other sub-sections would remain closed.
I would like to write a jQuery function which compares the current page url to the links in each section, and, if it finds a match, assign the "active_section" class to the relevant section. Unfortunately, I don't know how to do this.
I've been stuck on this all day and have made little headway.
I would greatly appreciate any help,
Jack
Your post is a little chaotic, so I will try to give you a general tips.
To get last element of your url use
var name = window.href.substr(this.href.lastIndexOf('/') + 1)
Now you can get all your subsections and iterate over them (for example using jQuery):
$('.sub-section').each(function() {
if ($(this).attr('id') === name) {
$(this).addClass('active');
}
});
If your ID's are different than names in url, you can create dictionary to map your equivalents:
var sectionMap = { "section-name-1": "sectionID1" };
And after you get url using first line of code I have provided, you can do:
name = sectionMap[name];
This question is kind of puzzle, I know its not so easy, I would like to create new navigation link based on clicked li, for example
<nav id="nav-main">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Tutorials</li>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Current Staff</li>
<li>Retired Staff</li>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Suppose If I click on "Home" I would like to create new nav bar like below
<nav id="nav_others">
<ul>
<li>Home</li>
</ul>
</nav>
Same way if I click on "Staff Profile"
<nav id="nav_others">
<ul>
<li>Others
<ul>
<li>Employee Portal
<ul>
<li>Staff Profile</li>
</ul>
</li>
</ul>
</li>
<ul>
</nav>
I don't know how many parent and children elements, my navigation element will have, if anyone here knows how to achieve this using jquery or javascript please share your solutions.
Thank You
Add the following div into your code(After nav-main):
<nav id="nav_others">
<ul></ul>
</nav>
And use the following Jquery:
<script>
$(document).ready(function(){
$('.main').click(function(e){
var val = $(this).text();
$('#nav_others ul').append('<li class="prev">'+val+'</li>');
e.preventDefault();
});
});
</script>
I'm trying to build a responsive navigation and want to append a <span> to all top level menu items that contain a submenu <ul>. For some reason this just appends the span to all items, can anybody advise as to why?
Here's the markup:
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
Home
<ul class="nav-submenu">
<li class="nav-submenu-item">
Submenu item 1
</li>
<li class="nav-submenu-item">
Submenu item 2
</li>
<li class="nav-submenu-item">
Submenu item 3
</li>
<li class="nav-submenu-item">
Submenu item 4
</li>
</ul>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Portfolio
</li>
<li class="nav-item">
Testimonials
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>
So you can see the first item has a dropdown, and I want to dynamically append a span element to each <li> that contains a submenu.
And the script (jQuery):
$.each($('.nav-item'), function (index, value) {
if ($('.nav-item').children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
Help appreciated!
Actually this is all you need:
$('.nav-item:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
using :has or .has() will be much more fun than all this $.each looping. The class looping is already done using class as selector cause returns a collection of your desired elements additionally filtered by has, all in one line.
http://api.jquery.com/has-selector/
http://api.jquery.com/has/
In the case you're planning to have a multi-sub-level list use:
$('nav li:has(ul)').append('<span class="nav-click" />');
LIVE DEMO
Try this
$.each($('.nav-item'), function (index, value) {
if ($(this).children('ul').length > 0) {
$(this).append($('<span class="nav-click"></span>'));
}
});
You have problem in this line:
if ($('.nav-item').children('ul').length > 0) {
this will always select first .nav-item found
you need to use this instead as you are looping through each .nav-item
if ($(this).children('ul').length > 0) {
I'm hoping someone might be able to show me
a) what is causing the current issues
b) an altogether more elegant solution
for the following problem:
I am extracting all the pages out of a Wordpress blog and the idea is to create a menu where sub navigation expands and contracts as the user interacts.
The nested menu markup is essentially as follows:
<nav id="projects">
<ul class="menu">
<li class="page_item page-item-249">
Selected projects
<ul class="children">
<li class="page_item page-item-298"><a href="..." >Level 2</a></li>
<li class="page_item page-item-263"><a href="..." >Level 2</a></li>
<li class="page_item page-item-212"><a href="..." >Level 2</a></li>
</ul>
</li>
<li class="page_item page-item-238">
Archive
<ul class="children">
<li class="page_item page-item-33">
Level 2
<ul class="children">
<li class="page_item page-item-46">Level 3</li>
<li class="page_item page-item-48">Level 3</li>
</ul>
</li>
<li class="page_item page-item-35">
Level 2
<ul class="children">
<li class="page_item page-item-52">Level 3</li>
<li class="page_item page-item-57">Level 3</li>
<li class="page_item page-item-59">Level 3</li>
<li class="page_item page-item-61">Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
The jQuery is as follows :
$(".page_item a").click( function(){
/* Set vars */
var $this = $(this);
var isActive = false;
var hasSublinks = false;
var nextLevel = $(this).next("ul");
if ( $this.next().html() !== null ) {hasSublinks = true;}
if ( $this.hasClass('active') ) {isActive = true;}
if ( !hasSublinks ) {
return true;
} else {
/* I have sub links... */
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
$(this).next("ul").slideDown();
$(this).addClass('active');
} else {
$(nextLevel).slideUp();
$(this).removeClass('active');
}
return false;
}
});
When I click on 'Archive', it expands its child list as expected. However, when I click on a link here, I expect it to slide down and reveal the next level (Level 3) but it has the opposite effect of sliding up to go back to where I started from.
I've spent a lot of time in the console, on Wordpress Codex trying to see what might be the issue, particularly challenging for me is that this code was working before (or seemed to). I'm aware that the code isn't the cleanest so I'm really hoping can show me where I'm going wrong!
Thanks
You don't seem to have the class active anywhere, so when you are doing this :
if ( $this.hasClass('active') ) {isActive = true;}
It set is Active to false
So you go in this part of code :
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
There is clearly a problem with your logic, try fixing it, i'll give you a hint if you find nothing