i asked several times for my navigation here but didn't get my desire results so i thought one last time maybe someone help me to achieve like this!
as you can see in below code i have only 5 parent menus and each of them have at least 12 child or submenus. i want to show my 5 parent or main menus horizontally like as you can see above image where home video news world sport etc and display their related child menus right under of it also horizontally again you look at image and notice parent link news selected and their child links like politics investigations obits education etc shown below him horizontally. and also notice that parent link news and child link investigations both have active class at the same time and i also want this effect.
and if you please visit this link - the telegraph you can also see if you refresh the page both navigation's remain intact and also maintains their active state.
this is my attempt please check out this fiddle in this fiddle you notice that when page is refreshed child navigation disappears and also problem with active link state only one link remains active but as you now know i want parent link to remain active even when i am on any of his child links just like you seen on the telegraph site in above link.
notes
i used jquery ajax to load pages dynamically to a div and also used hash in my urls.
also used this jquery bbq html5 history api based jquery ajax plugin to load pages, browser history and browser back and forward buttons and everything working fine.
please feel free to use any jquery lib any hack or what ever you like but i need this badly. anyone who can help me to achieve this i really appreciate him with bottom of my heart and also mention him on credits section of my site. thanks
p.s: ask any time for any further details if needed.
Related
I am very new to javascript... I would like to know if someone can help me, I have made a navigation tab that I want to be active when I visit a certain url... well, with split I have been able to do it in most of the links that needed...
But the CMS I'm using generates part of that link... and I can't complete the script...
the example of the full link is:
https://www.example.com/shop/index.php?rp=/announcements/1/New-Website-redesigned.html
Well that already with the final result... the problem is that there are quite a few possible results from
https://www.example.com/shop/index.php?rp=/announcements
There are several options to choose from and among those, when you click, it sends to the link above, (eye is content created by the cms) the idea is that the tab always stays active when browsing everything that is announcements and its derivatives. ..
for this i used the following in most of my links.
if(url.split('?')[0] === 'https://www.example.com/shop/supporttickets.php'){
btn1.classList.remove('active')
btn2.classList.remove('active')
btn3.classList.add('active')
btn4.classList.remove('active')
btn5.classList.remove('active')
}
This generally works, but I can't apply it to the example above...
I have a problem creating a wordpress code that will allow me to put only parts from the entire menu on the page. I do not want to put the menu as a regular menu more like a table of contents.
The project I'm working on is available at:
http://adepol.pl/
As you can check with the help of the menu button (between search and facebook, at the top of the page) the menu has a lot of items (unfortunately the customer does not want to consolidate the menu item).
I would like to be able to get automatically (with the help of shortcode) something like on the subpage:
http://adepol.pl/tasmy/
Does anyone have any idea how to do this?
With the set elements later with css I can handle, I mean the script to extract the individual levels of the list and the sublist assigned to them.
Thank you for any ideas.
i had to do something similar once (if i understand correctly) and i used the menu shortcode plugin
https://wordpress.org/plugins/menu-shortcode/
try it out! let me know if you need more!
I have a "server" that serves up individual html pages for each associated item in the server. I've done a lot of looking around but I'm afraid I just don't know enough to ask the right question. How I'd like it to work is as follows:
Static Sidebar (boostrap simple-sidebar)
Ordered list of links to associated html docs
When the associated link is pressed to display that content in my main container field.
From what I've read some use iframe in the main html container and make the clicked link the active link.
Others use bootstrap modal, but modals no longer support remote content.
Any hints toward how to ask the right question would be great!
I am redesigning my personal / development website, and trying to make it as user friendly as possible.
I wanted to load new pages with AJAX and slide them in, and that's what's currently happening.
Everything works in all current browsers (except IE, but I'll work on that in the future).
However, there's a strange spacing jump in my navigation menu on the first (and only first) page change. After the page changes once, the navigation spacing stays the same.
On page load
After a link is clicked
When a link is clicked, the navigation section from the new page is set to replace the current navigation, because each link has a data-offset attribute that's calculated by the server backend so that the javascript knows which direction and how far to slide the elements when they are clicked.
The way I'm currently doing it, it's either [the content width] or -[the content width].
However, the structure of the menu never changes, and the stylesheet is completely static. I have inspected all of these elements in Firebug, and nothing changes across page loads.
I linked the site, http://next.randolphwebdevelopment.com above, but I'll copy some of the pertinent Javascript here to give an idea of what's happening.
Pulls the entire page down that the link would redirect to (unless specified, all future code blocks are also inside this callback):
$.get( loc, function( data ){
//delete the doctype declaration
data = data.split("\n").slice(1).join("\n");
next_page = $(data.replace(/(\r\n|\n|\r)/gm,"").replace(/>\s*</gm,'><'));
Replaces the navigation with the new navigation from the target page (all that really changes is the data-offset attribute on each link):
//insert the new navigation
$('#header-content nav').html(next_page.find('#header-content nav').html());
$('#header-content nav a').click( navigation_clickHandler );
That's really it. There's a bunch of code to insert the new content and slide it in, as well as changing the page title, setting history states, etc., but this is the only code that touches the navigation menu, and there's no code that touches any stylesheets.
I'm open to any suggestions that fix the problem and/or improve the code design.
At first load nav is got from the server w/o php. I bet you wrote this html manually with intendation and so on.
After any click js recreates nav, but now w/o empty text nodes. Just <a>link1</a><a>link2</a>.
Add spaces or remove them from source html.
I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.
On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.
I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.
Thank you in advance!
Here is my fiddle
all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.
** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu
** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.
This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.
You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.
Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.
If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.
ul.active {
display: block
}
ul.second_level {
display: none
}
This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).
Update:
It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).
If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.