Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ricardo Rodriguez
2,749 PointsRemoving 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
17,781 PointsWhile 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.
Ricardo Rodriguez
2,749 PointsThanks 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
17,781 PointsIn your jQuery url: change the version from 1.6.2 to a newer version. I used 1.11.1.
Ricardo Rodriguez
2,749 PointsOh, 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
17,781 PointsJust found this for the dropdown arrow.
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
select::-ms-expand {
display: none;
}
Ricardo Rodriguez
2,749 PointsThe 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
17,781 PointsThat'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?
Ricardo Rodriguez
2,749 PointsI'm using Chrome Version 35.0.1916.153.
Very weird. I wonder if there's a workaround. :/