Jump to content

.London Domains - £4
Photo

jQuery vertical navigation...

CSS3 jQuery


  • Please log in to reply
10 replies to this topic

#1 notxalckram

notxalckram
  • Member
  • Newbie
  • 138 posts

Posted 15 April 2014 - 10:38

Hi,

 

I need to build a vertical navigation with a toggle system in place so the user can show or not show it. But what i'm looking for is when the toggle is turned on and the navigation slides off the webpage, is for the part of the navigation to still show.

 

I've designed it where each link in the vertical navigation has a image/icon to the right of it. And i'd like these icons to still show when the user toggles the navigation to hide.

 

Does anyone know of any tutorials I can follow to complete this?

 

I've searched for the past hour at tutorials and examples and not found what i'm looking for.


  • 0

#2 CraigP

CraigP
  • Supporter+
  • Mike's BFF
  • 2,320 posts

Posted 15 April 2014 - 10:47

You would be better of using CSS3 than Jquery, also You might want to provide a link/image to what it is you're after for accurate answers


  • 0

Push24 Creative - it's just who we are and what we do!
Get in Touch - craig@Push24Creative.co.uk

Follow Me - @craigpettit12 - @Push24Creative
+1 to those who help


#3 brightonmike

brightonmike
  • Global Mod
  • 2,149 posts

Posted 15 April 2014 - 10:50

You would be better of using CSS3 than Jquery

 

Why would CSS3 be better than jQuery for this?


  • 0

http://michaelgunner.co.uk/

 

Awesome free web meet up in Surrey: http://418conf.co.uk/


#4 notxalckram

notxalckram
  • Member
  • Newbie
  • 138 posts

Posted 15 April 2014 - 10:58

I've attached 2 pictures below.

Attached Files


  • 0

#5 Hal8

Hal8
  • Supporter+
  • Standard Member
  • 365 posts

Posted 15 April 2014 - 11:00

Hi,

 

I need to build a vertical navigation with a toggle system in place so the user can show or not show it. But what i'm looking for is when the toggle is turned on and the navigation slides off the webpage, is for the part of the navigation to still show.

 

I've designed it where each link in the vertical navigation has a image/icon to the right of it. And i'd like these icons to still show when the user toggles the navigation to hide.

 

Does anyone know of any tutorials I can follow to complete this?

 

I've searched for the past hour at tutorials and examples and not found what i'm looking for.

 

 

Hey. Would this tutorial help ?
 


  • 0

Freelance web design & development in Plymouth, Devon & Cornwall

 

Twitter @DaveHallettWeb | Facebook davehallettwebdesign | Instagram @dhal8


#6 brightonmike

brightonmike
  • Global Mod
  • 2,149 posts

Posted 15 April 2014 - 11:08

Use jQuery toggleClass to toggle a class on the navigation parent, e.g. "expanded".

 

Wrap the label text in spans, and then just:

li a span {
 display:none;
}

.expanded li a span {
 display:block;
}

VERY rough example: http://codepen.io/br...mike/pen/wBGuI/

 

Edit: I actually did the example a bit different from the post.


  • 1

http://michaelgunner.co.uk/

 

Awesome free web meet up in Surrey: http://418conf.co.uk/


#7 notxalckram

notxalckram
  • Member
  • Newbie
  • 138 posts

Posted 15 April 2014 - 11:32

I've put this into a separate html file and i'm not getting any results. Is there somewhere specific I need to put the JS? I've tried it above and below the code, and in a separate js file and I can't get it work.


  • 0

#8 brightonmike

brightonmike
  • Global Mod
  • 2,149 posts

Posted 15 April 2014 - 11:45

Don't just copy my code...it's just an example. We can't debug your code if we can't see it. 


  • 0

http://michaelgunner.co.uk/

 

Awesome free web meet up in Surrey: http://418conf.co.uk/


#9 notxalckram

notxalckram
  • Member
  • Newbie
  • 138 posts

Posted 15 April 2014 - 13:20   Best Answer

Hi again,

 

I've attempted to use your code with mine. And no luck. I've uploaded to a test folder on my site. Can you please take a look and let me know what i'm doing wrong. http://www.markclaxton.co.uk/test/

 

Thanks.


Nevermind I got it working! I forgot to add a link to the latest jquery library. Placed that and your Jquery at the bottom of the and its working! Thank you!


  • 0

#10 Inspired

Inspired
  • Supporter
  • Advanced Member
  • 680 posts

Posted 15 April 2014 - 14:18

Why would CSS3 be better than jQuery for this?

 

Smoothness of animation, robustness and web performance. Why would you use a large Javascript library to do something that can be done with a few lines of css?

 

CSS works everywhere, Javascript does not.


Use jQuery toggleClass to toggle a class on the navigation parent, e.g. "expanded".

 

Wrap the label text in spans, and then just:

li a span {
 display:none;
}

.expanded li a span {
 display:block;
}

VERY rough example: http://codepen.io/br...mike/pen/wBGuI/

 

Edit: I actually did the example a bit different from the post.

 

Personally, I think it's preferable to use JS to attach a css hook that can be used to hide the menu, and then toggle it. With your example a .no-js scenario leaves a user with no navigation at all. That's bad.

 

It's trivial to reverse that pattern and hide the menu only if JS is available, making it bulletproof:

 

http://internet-insp...ive-navigation/


  • 1

Web designer, UX flavoured. Opinionated. Caffeinated.

 

Opining at @nternetinspired and standing my ground at http://internet-inspired.com. I also make the best responsive Joomla templates in town.

 

Joomla UX Team Leader.


#11 notxalckram

notxalckram
  • Member
  • Newbie
  • 138 posts

Posted 15 April 2014 - 14:22

Don't just copy my code...it's just an example. We can't debug your code if we can't see it. 

 

Is there a simply way to add a drop-down menu for the type of navigation i've deployed?

 

On the link I posted i've updated the working navigation. And my boss would like a drop down menu applying to each link. I've found a few tutorials on the drop-down navigation but adding it to the current code looks tricky.

 

Like this for example http://webdesign.tut...-webdesign-5944


Edited by notxalckram, 15 April 2014 - 14:25.

  • 0





Also tagged with one or more of these keywords: CSS3, jQuery

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users