Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Removing Dropdown Arrows + Other Issues

Hello, I'm working on a website, and I followed the jQuery tutorial for adding a mobile navigation menu to a website.

This was very useful, but there are two more things I wanted to know how to do that wasn't covered. I customized the navigation a bit to experiment, and I wanted to know how to do two specific things, and I'll provide a link so you guys can take a look at what I'm doing:

1) I am looking for a way to remove the dropdown arrow.

2) In my dropdown menu, I have the word "navigate" on the form list. The HTML code looks as such:

<ul>
<li class="navbutton"><a href="#">Navigate</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Sign-Up</a></li>
<li><a href="#">Kids</a></li>
<li><a href="#">Contact</a></li>
</ul>

I have the CSS set up to hide the "navbutton" until the mobile navigation shows up. Ideally, when the user clicks navigate, it shouldn't pop up again in the menu itself. Is there a way to take the word "Navigate" off the list itself when you drop down the menu, but leave it there so the user can see "Navigate"?

An example of what I am looking to do: On the big website http://www.ign.com/, on the top left, there's a "Browse" and the 3 bars. Something like that is what I'm looking to do in a nutshell, though I don't need the hover capability. Just click "Navigate" and the rest of the menu pops up.

Here is a URL of the site I'm working on: http://praxart.com/slidertest/index.html

The navigation menu pops up when you bring the window down.

Please excuse some sloppy coding or ugly colors for the mobile navigation; I was just poking around in CSS to see how far I can customize the navigation menu as is.

Any and all help is so appreciated! Thank you so much for the videos, I've learned a lot. Just trying find ways to customize it a bit further! Thanks!

5 Answers

Chris Dziewa
Chris Dziewa
17,781 Points

While I couldn't figure out how to leave the navigation label on, I did figure out how to remove it for you when you do the dropdown. I believe you need to find a way to recreate the navigation option when you click outside of the dropdown ( perhaps with $(document).bind()) or navigate to a new page. I think the second one will take care of itself since you are loading a page again. Hopefully my code will help you in the right direction.

<li class="navbutton"><a href="#" class="navigate">Navigate</a></li>
<!-- Added class="navigate" to your first option -->

And part of the app.js file you included:

  var $option = $("<option></option>");
//Deal with selected options depending on current page.

  if ($(this).hasClass("navigate") ) {
    $option.addClass('default');
    //Lets you select the Navigation option later
  }
if($anchor.parent().hasClass("selected")) {
    $option.prop("selected", true);
  }

//Option's value is the href
    $option.val($anchor.attr("href"));
    //option's text is the text of link
  $option.text($anchor.text());
    //append option to select
$select.append($option);
});

    //Create button 


//Bind change listener to select
$("#nav").on("click", function() {
  $("option[class='default']").remove();
  //When you click on the navigation, the navigation option is removed
});

$select.change(function(){
//Go to select's location
    window.location = $select.val();
});

If I had more time, I could maybe figure out the rest of it. Hope this helps though.

Thanks for answering! The code you posted isn't working for me. I tried modifying it in different ways but it often just disappears completely. The URL is updated with the code you mentioned: http://praxart.com/slidertest/index.html

As you can see, the mobile drop-down menu is working just as it did last time, no changes, even after all the code is done, even though the classes do show up...

Thanks again for any help!

Chris Dziewa
Chris Dziewa
17,781 Points

In your jQuery url: change the version from 1.6.2 to a newer version. I used 1.11.1.

Oh, hah, thanks! Now it's working, though contact is showing up twice in a weird way. It shows up when I first click Navigate, then disappears. Hm...

I still am wondering how to get rid of the dropdown arrow, though. I googled a few work arounds but I feel like all of them look fairly messy, or they just plain don't work.

Chris Dziewa
Chris Dziewa
17,781 Points

Just found this for the dropdown arrow.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}


select::-ms-expand {
    display: none;
}

The simplicity. Thanks so much!

I hope it's not too much to ask as a last thing why the first click on the menu has the last option duplicated like in the following screenshot:

http://oi58.tinypic.com/fej39i.jpg

Just a small detail. Thanks again so much. This has helped loads.

Chris Dziewa
Chris Dziewa
17,781 Points

That's really strange. I tried it on Firefox and Chrome and wasn't able to duplicate the problem. Are you using Firefox or something else? Which version?

I'm using Chrome Version 35.0.1916.153.

Very weird. I wonder if there's a workaround. :/