Cesar Aracena
asked on
How can I make links usable with HREF and JS code?
Hi guys. I'm making a site out of a template I liked a lot. It mainly uses Bootstrap and some js (which I have no clue on).
I've got the navigation bar filling up beautifully from the DB. Some menu items have children (dropdown menus) and some do not. My problem is that the main menu items (the navigation bar) is made in the template to expect children so when I click on a link inside a children, it takes me to the expected page but when I click on a top-level menu item it does nothing.
Here's the top part of my navigation bar. As you can see there is a HOME button which works if I take out the class attribute out from the link and there is a BROWSE button which shows up as a link and on mouse over it displays a beautiful sub-menu. The links inside the sub-menu work... but the BROWSE main link doesn't take me anywhere:
Any ideas? Thanks in advance!
I've got the navigation bar filling up beautifully from the DB. Some menu items have children (dropdown menus) and some do not. My problem is that the main menu items (the navigation bar) is made in the template to expect children so when I click on a link inside a children, it takes me to the expected page but when I click on a top-level menu item it does nothing.
Here's the top part of my navigation bar. As you can see there is a HOME button which works if I take out the class attribute out from the link and there is a BROWSE button which shows up as a link and on mouse over it displays a beautiful sub-menu. The links inside the sub-menu work... but the BROWSE main link doesn't take me anywhere:
<li class="dropdown">
<a href="/" class="dropdown-toggle js-activated">HOME</a> <!-- I can make these work taking out the CLASS -->
</li><!-- /.dropdown -->
<li class="dropdown yamm-fullwidth">
<a href="browse" class="dropdown-toggle js-activated">BROWSE</a> <!-- These are the ones giving me the hardest time -->
<ul class="dropdown-menu yamm-dropdown-menu">
<li>
<!-- FROM HERE ON ALL WORKS / NO JS ON LINKS AS THEY ARE NOT DROPDOWNS -->
<div class="yamm-content row">
<div class="col-sm-4 inner">
<h4>SOME SUB-MENU TITLE</h4>
<figure>
<div class="icon-overlay icn-link">
<a href="browse/some"><img src="assets/images/static/img54ceb03e707907.63556505.png" alt=""></a>
</div>
<figcaption>
<p>Some text goes here blah blah blah</p>
<a href="browse/some" class="btn">Some link here</a>
</figcaption>
</figure>
</div><!-- /.col -->
<div class="col-sm-4 inner">
......................................
Any ideas? Thanks in advance!
ASKER
Thanks Marco. Tried that among few other things and nothing happened. If I take out the "class" inside the "a" tags, the links work even if they point to a folder directly.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hmm... I've been thinking about that and it does makes sense. It's a responsive layout so that wouldn't work properly when used in a touch screen device. I guess I'll have to put every option (i this case I'm talking about a "browse all" link) inside the sub-menu.
Thanks for poiting that out ;)
Thanks for poiting that out ;)
Usually, in touch devices the non-existent hover event is replaced by the tap. I'm using bootstrap in this period and it does all the work to manage this kind of things. But I agree, even for space and layout reasons: you can add to the submenu an item 'Brwose all' and you've done :-)
Thanks for points and good luck with your project.
Thanks for points and good luck with your project.
Open in new window
where 'some' is upposed to be a directory and 'somepage.html' the name of the page you want the link bring the user to.