Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Need Help with a fancy jQuery Menu Bar solution
New Posts  All Forums:Forum Nav:

Need Help with a fancy jQuery Menu Bar solution

post #1 of 2
Thread Starter 
Hi Guys,

I'm looking to do a rather fancy Sidebar menu system. Heres what the menu bar looks like at the moment.



HTML:
Code:
<div id="sideNav">
  <h3>Bikes</h3>
  <ul class='MenuBarVertical'>
    <li><a href='?sec=products&amp;page=finder&amp;category=1'>Road</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=2'>Mountain</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=3'>Path &amp; Family</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=4'>BMX</a></li>
  </ul>
  <h3>Clothing</h3>
  <ul class='MenuBarVertical'>
    <li><a href='?sec=products&amp;page=finder&amp;category=6'>Jerseys</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=7'>Shorts &amp; Knicks</a></li>
  </ul>
  <h3>Equipment</h3>
  <ul class='MenuBarVertical'>
    <li><a href='?sec=products&amp;page=finder&amp;category=11'>Hydration</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=13'>Helmets</a></li>
    <li><a href='?sec=products&amp;page=finder&amp;category=23'>Nutrition</a></li>
  </ul>
</div>
Basically using the jQuery .toggle() Method i want to be able to filter the each li based on whether or not there are items in a Womens specific, Mens specific and All model.

this is what i have come up with so far.

HTML:
Code:
<div id='sideNav'>
  <img src='/images/menuFilter.jpg' alt='Click to toggle' class='toggleHead'/>
  <h3>Bikes</h3>
  <ul class='MenuBarVertical'>
    <li class='uni womens mens'><a href='?sec=products&amp;page=finder&amp;category=1'>Road</a></li>
    <li class='uni mens'><a href='?sec=products&amp;page=finder&amp;category=2'>Mountain</a></li>
    <li class='uni womens mens'><a href='?sec=products&amp;page=finder&amp;category=3'>Path &amp; Family</a></li>
    <li class='uni'><a href='?sec=products&amp;page=finder&amp;category=4'>BMX</a></li>
  </ul>
  <h3>Clothing</h3>
  <ul class='MenuBarVertical'>
    <li class='uni womens mens'><a href='?sec=products&amp;page=finder&amp;category=6'>Jerseys</a></li>
    <li class='uni womens mens'><a href='?sec=products&amp;page=finder&amp;category=7'>Shorts &amp; Knicks</a></li>
  </ul>
  <h3>Equipment</h3>
  <ul class='MenuBarVertical'>
    <li class='uni'><a href='?sec=products&amp;page=finder&amp;category=11'>Hydration</a></li>
    <li class='uni womens mens'><a href='?sec=products&amp;page=finder&amp;category=13'>Helmets</a></li>
    <li class='uni'><a href='?sec=products&amp;page=finder&amp;category=23'>Nutrition</a></li>
  </ul>
</div>
I'm not to sure if the 'uni' class is redundant or not because every one of them will say that

being new to jQuery I'm not to sure how to go about hiding the irreverent 'li' classes, while leaving the visible relevant ones visible and making the hidden relevant ones visible in one smooth motion.

Thanks
post #2 of 2
you do realize you cannot "filter" completely with the toggle command. You are just going to be able to expand or contract the table itself

reference here
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
OverKill
(18 items)
 
  
CPUMotherboardGraphicsGraphics
AMD Phenom II X6 1055T Gigabyte 890FXA ATI FirePro V3800 ATI FirePro V3800 
RAMHard DriveHard DriveOptical Drive
16gb GSkill 10666 Seagate Western Digital  LG Blue Ray 
CoolingOSMonitorMonitor
stock air 7 Pro 64 bit (2)22" Acer x223w (2)23" Acer G235H 
KeyboardPowerCaseMouse
Microsoft Wireless Antec 900watt Antec 300 Wacom Tablet 
Audio
Logitech Speakers and sub 
  hide details  
Reply
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 › Need Help with a fancy jQuery Menu Bar solution