Solved

How can I make links usable with HREF and JS code?

Posted on 2015-02-02
5
154 Views
Last Modified: 2016-02-25
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:

<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">
......................................

Open in new window


Any ideas? Thanks in advance!
0
Comment
Question by:Caracena
  • 3
  • 2
5 Comments
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40585587
To make a link usable you only need to give it a target:
<a href="browse/somepage.html"><img src="assets/images/static/img54ceb03e707907.63556505.png" alt=""></a>

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.
0
 
LVL 6

Author Comment

by:Caracena
ID: 40586086
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.
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 40586094
Evidently you have some javascript which use that class and prevents that anchor to bring somewhere...
But this makes ense: if a menu item has a submenu, it is intended as a 'door' to access to the submenu and usualy it doesn't have a working link itself. But if you want it to work as a link, you have to go through the javascript code attached to the template to find where that class is used and how. Or you have to post the code here :-)
0
 
LVL 6

Author Closing Comment

by:Caracena
ID: 40586100
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 ;)
0
 
LVL 31

Expert Comment

by:Marco Gasi
ID: 40586105
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.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question