Responsive Navigation

  • get_username

    (@get_username)


    12 years, 12 months ago

    I’ve done a search online for “responsive navigation” and for the most part there are quite a few tutorials for basic navigation. However, I haven’t found one that is exactly for multi-level and WordPress. I’ve been banging my head trying to implement some of these tutorials to fit the a drop-down/Wordpress environment, but I’m coming up way short.

    I’d like to find something, when viewed on smaller view-ports, that will show a menu button to expand the hidden navigation. Pretty basic responsive stuff, or so you’d think.

    I’m hoping someone might have some helpful links that I have yet to find. Again, must have second level nav, and work into the wp_nav_menu array.

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • David Choi

    (@wpthemes777)

    12 years, 12 months ago

    The easiest way is break down other people’s code to see how it’s done. Here is a free theme

    http://ww.wp.xz.cn/themes/responsive

    their demo

    http://themeid.com/demo/responsive/

    reducing your browser size will trigger the mobile menu. You can use firebug plugin for Firefox browser to find out the codes, then study how CSS are done from the source file.

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    Thanks, David. I’m actually pretty familiar with the “ins and outs” of digesting code. I constantly study other people’s code as well. So the problem isn’t in my ability to find code.

    I’ll take a closer look at that second link, but I’m still hoping to find a step-by-step so that I can understand how to create a menu instead of just coping another theme. I’m trying to go beyond being a hacker, and actually learn. 🙂

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    Something like this, but with drop-down and WordPress support.

    http://responsive-nav.com/

    David Choi

    (@wpthemes777)

    12 years, 12 months ago

    Actually you only need to understand media query

    http://www.techrepublic.com/blog/webmaster/how-to-create-media-queries-in-responsive-web-design/1789

    to change anything via CSS when the screen size changes. Once understand this concept, you will get eureka moment when breaking down the code used by

    http://responsive-nav.com/

    and the basic WordPress menu structure (which really depends on the theme).

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    Thanks again, David. I understand media queries more than I understand the implementation of these menus. I’ve built my own responsive framework from the ground up, so I feel comfortable using media queries. Maybe I’m missing your point, and I apologize for that. I will definitely read more into that article as a refresher.

    I’ve created my basic CSS drop-down nav, but have not created the mobile version yet. What I’m struggling with is the implementation of JQuery to get the menu to work correctly. Especially, the drop-down in mobile view, and reveling the menu on click.

    If I break down what you’re saying, it sounds like I need to get my menus working in standard view – which I have already – then mobile view. And getting these to display correctly using my media queries. Once those are set, worry about the JQuery and how it animates the menu. Correct me if I’m wrong.

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    I think another thing that is throwing me off is the drop-down menu. Having just buttons without the drop-down makes more sense. I wonder if I’m over thinking it. Does having a drop-down just require an additional click that is similar to the mobile “menu” button?

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    I’m beginning to think you’re right, David. The more I read, the more I realize I need to learn more. While I know what a media query does, I think understanding how to position things with them will help.

    David Choi

    (@wpthemes777)

    12 years, 12 months ago

    Great to hear you are having progress. jQuery is not needed for drop down menus, unless you want to use it. This tutor might help:

    http://acroweb.co.uk/2010/11/08/adding-css-drop-down-menus-to-wordpress-3-0-theme/

    and the one using jQuery

    http://new2wp.com/pro/jquery-drop-down-menu-wordpress-3-menu/

    Thread Starter get_username

    (@get_username)

    12 years, 12 months ago

    Hey David,

    I think there is some confusion around the drop-down. I don’t need jQuery for my drop-down menus as they are all CSS driven. I was referring to using jQuery for the mobile navigation.

    I’m pretty solid when it comes to html and css, and I understand drop-downs, but every post I read about responsive navigation has some sort of JS or jQuery involved.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Responsive Navigation’ is closed to new replies.