The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How do I create a drop-down list of links that open in the same window?
dsmith916
post Dec 17 2013, 03:46 PM
Post #1


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
How do I create a drop-down list of links that open in the same window?

I just want a default menu bar with a simple title 'Artists' and a list of links under it.

Selecting any of the names should go to a url in the same page.

I've searched for how to do this and found a variety of methods, rather than implementing each of them until I find the right one I was hoping someone here with a little more experience could point me to what I'm looking for.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 17 2013, 06:26 PM
Post #2


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
I should add that by drop down menu I mean a list like the one you select what country you're from when signing up for a service or ordering something. Nothing fancy, just a default list that when one word is selected it takes you to a url
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 17 2013, 06:36 PM
Post #3


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
This is pretty much what I'm looking for: http://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_select
I found it here: http://www.w3schools.com/tags/tag_select.asp

But, how do I turn the selections into links to a url? And how do I make the list say 'Artists' so people know what it's a list of not just the first item on the list?

here is the code:
CODE

<!DOCTYPE html>
<html>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 17 2013, 07:34 PM
Post #4


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
CODE
<!DOCTYPE html>
<html>
<body>

<form name="Artists">
<select name="Artists" id="Artists">
  <option value="http://search.msn.com/">Volvo</option>
  <option value="http://saab.com">Saab</option>
  <option value="http://opel.com">Opel</option>
  <option value="http://audi.com">Audi</option>
</select>
  <script type="text/javascript">
var urlmenu = document.getElementById( 'Artists' );
urlmenu.onchange = function() {
      window.open(  this.options[ this.selectedIndex ].value );
};
</script>
</body>
</html>


Two questions I need answered to get this working:
1) how do I get this to open links in the same window, not a new one.
2) how to I get the list to just say 'Artists' instead of 'Volvo'
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 17 2013, 08:11 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,649
Joined: 10-August 06
Member No.: 7
QUOTE(dsmith916 @ Dec 18 2013, 12:36 AM) *

But, how do I turn the selections into links to a url?

You might use location.href='' instead of window open(). There's an example on http://www.cs.tut.fi/~jkorpela/forms/navmenu.html but also explanations of the disadvantages with SELECT menus used for navigation.

QUOTE
And how do I make the list say 'Artists' so people know what it's a list of not just the first item on the list?

You could make the first OPTION a dummy item called "Artists". Or use explanatory text before the SELECT menu.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 17 2013, 09:22 PM
Post #6


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
QUOTE(Christian J @ Dec 17 2013, 08:11 PM) *

QUOTE(dsmith916 @ Dec 18 2013, 12:36 AM) *

But, how do I turn the selections into links to a url?

You might use location.href='' instead of window open(). There's an example on http://www.cs.tut.fi/~jkorpela/forms/navmenu.html but also explanations of the disadvantages with SELECT menus used for navigation.

QUOTE
And how do I make the list say 'Artists' so people know what it's a list of not just the first item on the list?

You could make the first OPTION a dummy item called "Artists". Or use explanatory text before the SELECT menu.


How do I make a dummy option, I tried and it still thought it was a link and tried to go to a blank url. Also, why can't I make it bold? I tried using <b></b> but it didn't show up.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 17 2013, 11:19 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Because...

Contents Plain text (including entities)
http://htmlhelp.com/reference/html40/forms/option.html

Use CSS.
http://htmlhelp.com/reference/css/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 18 2013, 04:55 AM
Post #8


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
QUOTE(pandy @ Dec 17 2013, 11:19 PM) *

Because...

Contents Plain text (including entities)
http://htmlhelp.com/reference/html40/forms/option.html

Use CSS.
http://htmlhelp.com/reference/css/


I don't understand. Does that mean I cannot make the links open in the current page instead of a new window?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 18 2013, 05:03 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
No. It means you can't use B or any other markup inside OPTION since it can only contain plain text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 18 2013, 05:53 AM
Post #10


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
Ok, I got it working...In theory... I tested it locally and it worked fine but when I implemented the code (on a tumblr) the links no longer work: http://hiphophumor.tumblr.com/

The drop down menu is on the right side, and the links don't work at least when I select one of them. It was working perfectly when I had the code on it's own page. What did I do wrong? How do I get the links working?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 18 2013, 06:17 AM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The dropdown works. That you get a browser error is because you link to pages on the domain hiphophumor.com which doesn't exist.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 18 2013, 06:52 AM
Post #12


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
QUOTE(pandy @ Dec 18 2013, 06:17 AM) *

The dropdown works. That you get a browser error is because you link to pages on the domain hiphophumor.com which doesn't exist.


Oh wow I just notice my huge mistake. There was supposed to be a .tumblr.com in there...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dsmith916
post Dec 18 2013, 06:52 AM
Post #13


Advanced Member
****

Group: Members
Posts: 162
Joined: 5-December 12
Member No.: 18,203
Thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 06:09 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC