Navigation for mobile site

  • orionjohnson

    (@orionjohnson)


    13 years, 10 months ago

    I am creating a mobile theme for a friend, and their site is running on WordPress. On the mobile version, I want the navigation menu at the top to be a simple select list. I have that working just fine, but when you navigate to another page, I’d like the list to show you which page you’re on. I know this means adding the attribute selected=”selected” to that option in the list when that page loads, but I’m not sure how to do that. Somehow I need to tap into WordPress knowing which page it’s on, and then maybe Javascript or something to add the attribute.

    If anyone has some helpful tips on what code I can use to make this happen, I would be very thankful.

    Here’s the code I have in place for the select list:

    <nav class="sections">
     <div class="mini">
          <select name="sections" id="subsection-select">
               <option>- Navigation -</option>
               <option value="http://www.domain.com">Home</option>
               <optgroup label="philosophy">
               <option value="http://www.domain.com/values/">values</option>
               </optgroup>

               <optgroup label="capabilities">
               <option value="http://www.domain.com/marketing-strategy/">marketing strategy</option>
               <option value="http://www.domain.com/design/">design</option>
               <option value="http://www.domain.com/manufacturing/">manufacturing</option>
               <option value="http://www.domain.com/co-packing/">co-packing</option>
               <option value="http://www.domain.com/safe-quality-food/">safe quality food</option>
               </optgroup>
               <option value="http://www.domain.com/contact/">contact</option>
          </select>
     </div>
</nav>
Viewing 3 replies - 1 through 3 (of 3 total)
  • wpismypuppet

    (@wordpressismypuppet)

    13 years, 10 months ago

    You are going about it the wrong way I think… you should use WordPress’ built in wp_nav_menu() to create your navigation. It’s powerful, and you can get it to look like your list shown. The reason for using WordPress’ menu it it’ll output a class called “current-menu-item” on the <li> of the active menu item (unless you change the output to make them options instead). And of course the added benefit of changing your menu on the fly through the admin interface.

    Using jQuery, you can insert your selected=”selected” by doing something like:

    jQuery('nav option').each(function() {
	if(jQuery(this).hasClass('current-menu-item')) {
		jQuery(this).attr('selected', 'selected');
	}
}

    This isn’t tested jQuery, but it should point you in the right direction.

    Thread Starter orionjohnson

    (@orionjohnson)

    13 years, 10 months ago

    Thanks so much! The built in menu really helps make the navigation more flexible for my friend to add pages later. I was stumbling on quickly getting the menu to look like a select list, but a Google search found this plugin for me: http://wordpress.org/extend/plugins/dropdown-menus/.

    This is perfect, and I had it up and running on the site in 15 minutes.

    wpismypuppet

    (@wordpressismypuppet)

    13 years, 10 months ago

    You are welcome 🙂 Glad it worked out.

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

The topic ‘Navigation for mobile site’ is closed to new replies.