CODEWITHSUNDEEP
jqueryhtmlcss
user2431709
user2431709

Reputation:

Simple CSS/HTML Menu links not working

I have this navigation menu but links without a (like the first link) don't work. any ideas what this could be?

<div id="nav">
<li><a href="/admin/index.php">Dashboard</a></li>
<li><a>Contacts</a>
    <ul>
    <li><strong>Companies</strong></li>
    <li><a href="/admin/index.php?id=customer/addcustomer">Add Company</a></li>
    <li><a href="/admin/index.php?id=customer/viewcustomer">View Company</a></li>
    <li><strong>Contacts</strong></li>
    <li><a href="/admin/index.php?id=contacts/addcontact">Add Contact</a></li>
    <li><a href="/admin/index.php?id=contacts/viewcontact">View Contact</a></li>
    <li><strong>Resellers</strong></li>
    <li><a href="/admin/index.php?id=reseller/addreseller">Add Reseller</a></li>
    <li><a href="/admin/index.php?id=reseller/viewreseller">View Reseller</a></li>
    <li><strong>Salesman</strong></li>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
<li><a>Customer Info</a>
    <ul>
    <li><a href="/admin/index.php?id=salesman/addsalesman">Add Salesman</a></li>
    <li><a href="/admin/index.php?id=salesman/viewsalesman">View Salesman</a></li>
    </ul>
</li>
</div>

here is a fiddle: http://jsfiddle.net/ZGvVW/

Upvotes: 0

Views: 1252

Answers (2)

Antonio Pavicevac-Ortiz
Antonio Pavicevac-Ortiz

Reputation: 7729

From what I understand a tags must have an a destination associated with them i.e. href https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?redirectlocale=en-US&redirectslug=HTML%2FElement%2Fa#attr-href

Upvotes: 0

teynon
teynon

Reputation: 8288

e.preventDefault is cancelling navigation.

http://jsfiddle.net/ZGvVW/2/

One possible solution is to check for an href attribute.

$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
         if ($(this).attr("href") == null) {
           $('#nav li ul').slideUp();
           $(this).next().slideToggle();
           $('#nav li a').removeClass('active');
           $(this).addClass('active');
           e.preventDefault();
         }
     }
  });
});

Upvotes: 1

Related Questions