Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Expanding menu with current links (Jquery)
New Posts  All Forums:Forum Nav:

Expanding menu with current links (Jquery)

post #1 of 13
Thread Starter 
I have been trying to make a very specific menu for a site for a while now and in my original pursuit it was recommended I use jQuery and with my already limited knowledge of Javascript I tried to put something together but I am getting more and more lost.

Basically I am trying to make a menu that can expand each separate section on mouse click as is currently setup here but additionally if the link matches the url it will highlight that link with the class "selected" and expand the section that contains it.

Here is what I have so far, which is bits and pieces of information I could gather and attempt to combine (obviously the auto highlight link wont work in this environment):

http://jsfiddle.net/qtYX3/7/

(remember to fork the jsFiddle before you make changes so that you get a new link instead of everyone editing the same one)

Thanks,

Akhen
Edited by Akhen - 3/13/12 at 7:29pm
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
post #2 of 13
Well, because of my work I'm used to using pure JS rather than libraries like jQuery (even though I do like jQuery), so my solution doesn't involve a lot of jQuery, but I'm sure you can convert it if you really want to.

Here: http://jsfiddle.net/SJaPb/4/
Edited by MakubeX - 3/13/12 at 10:29pm
post #3 of 13
Thread Starter 
Thanks, I am looking at the code and trying to make sense of it. I am wondering how the window.location.pathname works? Will it grab the end of the url (ie index.php) and if it matches the link it will add the selected class?
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
post #4 of 13
Yes, and if you rather get the whole (absolute) URL you can use document.URL. The window.location.pathname gets the relative path.
post #5 of 13
Thread Starter 
So any link relative to the pages location would work? (home.php or main/home.php or ../home.php)

Also would I just wrap all that javscript/jquery in a script tag right under the menu?
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
post #6 of 13
Yes, any relative link should work. To make sure you have the correct path for any page just copy/pase the path you get from window.location.pathname and set that as the "href" of the link.

You also need to make sure those functions are called after the page loads. For that you can use $(document).ready(function(). Info here: http://docs.jquery.com/Tutorials:Introducing_$%28document%29.ready%28%29
post #7 of 13
Thread Starter 
Still cant get it to work but I think it might also be selecting only the first anchor tag (thusly adding the selected class alongside the active). So I think we might need to specify the selection in the DOM such as $('.menu > li > ul > li'). So would I essentially change:
Code:
var menuElements = $(".menu > li").get();
to
Code:
var menuElements = $(".menu > li > ul > li").get();

Thoughts/suggestions?
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
post #8 of 13
Works fine for me with any of the Sections as long as that section's href matches the current URL (as returned by window.location.pathname).

Does it work for you in Jsfiddle if you press run?

In this version Section 3 is selected: http://jsfiddle.net/SJaPb/7/
post #9 of 13
Thread Starter 
Maybe I was unclear at first, I want the links inside the sections to highlight and that section to expand if it contains such a link, I have tried adding the "/_display/" to others with no result.
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
MG/3D Rig
(15 items)
 
  
CPUMotherboardGraphicsRAM
I7-930@3.8 Evga x58 SLI LE BFG Geforce GTX 280 H2OC Mushkin 3x4GB DDR3 1333 
Hard DriveOptical DriveCoolingOS
Seagate 320gb 7200.11 Dual DVD/DVDRW XSPC Rasa / 3T Coolingworks / D5 Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Doublesight DS-263N 26" Logitech Access Corsair HX 650W Antec P180 
MouseMouse PadAudio
Logitech G5 Steelpad QcK+ Auzentech Prelude 
  hide details  
Reply
post #10 of 13
Oh, i see. I misunderstood. I though you just wanted to highlight and expand the section. I'll fix it when I get home.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Expanding menu with current links (Jquery)