Shelby Shelby - 1 month ago 6
jQuery Question

Adding an anchor tag to list items making the list items disappear?

This is my first question on here, so apologies if it isn't worded correctly.
I'm trying to make a popup mobile navigation menu with jQuery, but when I add anchor tags to my list items, they disappear. Here's the HTML:

<nav>
<button id="nav-open">&#9776;</button>
<div id="menu">
<button id="nav-close"> X </button>
<ul>
<li><a href="http://foo.com">Home</a></li>
<li>About</li>
<li>Events</li>
<li>Gallery</li>
<li>Booking</li>
</ul>
</div>
</nav>


Here is the JS:

$("#nav-open").click(function(event){
$("#menu").show();
$(this).addClass("active");
event.preventDefault();
});

$("#nav-close").click(function(event){
$("#menu").hide();
$(this).removeClass("active");
event.preventDefault();
});


When a user clicks on #nav-open on a mobile device, it brings up the popup menu. (And when #nav-close is clicked, vice-versa.) I'm trying to add anchor tags to the list items but for whatever reason when I
add links to #menu's li's, the text disappears completely.

Any ideas on how to fix this?

Here is the CSS:

#menu {
background: #000;
opacity: 0.95;
font-family: Arial Narrow;
text-transform: uppercase;
text-align: left;
font-weight: bold;
font-size: 30px;
margin-right: 5%;
height: 60px;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 260px;
padding-bottom: 10px;
}

Answer

Your problem isn't with any of the code you posted- it's in the CSS. You have this style declared:

nav a {
   visibility: hidden;
}

Not sure why you have it, but that's definitely the cause. Simply deleting this will solve your issue.

Update: The CSS is in this file: http://omega.uta.edu/~slc1101/courses/ctec4350/semester-project/styles/styleKendall.css