/    Sign up×
Community /Pin to ProfileBookmark

Responsive Navigation Question

Copy linkTweet thisAlerts:
Jan 30.2015

I am a new web developer and used the <select> <option> tags for my mobile navigation. It’s looks good and I have it styled how I want it, but the links don’t work? I doubled checked the links and they are correct.

Why are the menu links not working? What am I forgetting? Thanks for the help.

to post a comment
Full-stack Developer

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulJan 30.2015 — Please post the relevant code. We are not mind readers! ?
Copy linkTweet thisAlerts:
@Beast79authorJan 30.2015 — Ha! Ok yes that makes sense. Below is the code. Thanks! ?

<div id="mobile-nav">

<select>

<option value="Home"><a href="/index-new.html">Home</a></option>

<option value="About Us"><a href="/about-us.html">About Us</a></option>

<option value="Dealers"><a href="/dealer-opportunities.html">Dealers</a></option>

<option value="Blog"><a href="#">Blog</a></option>

<option value="Contact Us"><a href="/contact-us.html">Contact Us</a></option>

</select>

</div>
Copy linkTweet thisAlerts:
@BMR777Jan 30.2015 — The way you have your code there, yes it's a select, but you can't just stuff anchor tags in a select and have it work. You will have to do one of two things to make this work:

1) Restructure your select so that each option value is a URL, then wrap your select in a form tag and submit the form to a page that will read in your URL and redirect the user to the correct page. This will likely require some server side code, such as PHP to read the form value and do the redirect

2) Restructure your select so that each option value is a URL, then have some Javascript code that listens for an onchange event on the select and redirects the user to the URL when the select changes.
Copy linkTweet thisAlerts:
@Beast79authorJan 30.2015 — Ok great! Thanks for getting back to me on that. I would prefer the JavaScript code because I'm more familiar with that.

Do you have an example of what the JavaSCript would look like?
Copy linkTweet thisAlerts:
@jedaisoulJan 31.2015 — A word of warning: Select boxes are not intended to function in the manner you desire. So it may confuse and annoy users, despite how neat it may look to you! ?

I would suggest that you would be better off using a drop-down menu.
×

Success!

Help @Beast79 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...