Linking items in Drop Down menu to pop-up.

  • 2
  • Question
  • Updated 9 years ago
  • Answered
How do I create pop-up boxes from multiple links in a drop-down menu? For instance the drop -down menu box has 'Choose a category' written in it. When clicked it drop downs with a list of categories, fourteen to be precise. Sure would make my site faster to navigate on.

Thanks,

Lauren
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
  • excited to learn how to do this.

Posted 9 years ago

  • 2
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Pickles,

Apologies for the delayed reply. We do not have a widget that allows you to add a drop down box. However, you could make use of an HTML generator to create the code for your drop down box.

Here is one that will do it for you: http://www.htmlbasix.com/dropmenu.shtml. This website gives you a form to fill in where you have to put in the URL (web address) of each of your pages along with the text you want in the menu for each link in the box.

To get the URL of your SynthaSite page the easiest thing to do is:

1) First create all your pages and publish your site.
2) Then go to your published site and copy the URL from your browser window for each page.

Once you have filled in the form on the htmlbasix site and generated your HTML code and copied it, in SynthaSite:

1) Drag and drop an HTML widget onto your page.
2) paste the code from htmlbasix into the HTML editor and then click "ok"
3) Update your site.

You will then have your own drop down menu on your page.

Does this answer your question, if not please let us know?
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Hi Kershnee,

I have published my site and the dropdown menu items are not linking. I used the dropdown menu generator you suggested and copied the code exactly. The menu items are not linking to their appropriate pages. I am at a loss what to do. I have already checked the url's and they all appear ok. Help, help!

Lauren
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Sorry, forgot to give the browser and my web address. I am using Firefox and my url is http://bgreendecoratingproducts.com

Lauren
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi there Lauren,

I suspect the problem is with the filthy syntax required for menus :)

Could you copy and paste it so we can have a quick squiz at it?
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Hello Lauren....Good to see you up and running....I do have a suggestion as it has really helped me....Make sure all your photos have alt text tags (on product photos I use a keyword phrase)...I also link photos and I think that is why I show very well in image searches.I get many site hits via image searches.
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Thanks for the suggestions. Photos are the next thing on my list to do along with inventory.

Lauren
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Soory lauren,

I didn't mean to post that code.

The only problem I see is the { .php/" }at the ends of the URL lines. Try removing the {/} and it should look like this {.php"} and see what's happening.
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Peter,

Removed your coding, pasted back the original, and removed the <!/ >behind the <!php.> Published my site and it is not working. Is it possible that the number for the form needs to be changed to two and three ?

Lauren
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Yep, deleted the second and third box and the first box is working. Now lets see if numbering them differently does the trick.

Lauren
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Yep, numbering them differently is giving me a 404 error message that there is no page named as the one I am clicking. This happens on all three boxes. Maybe Emmy will know what to do from here. I'll let her know. At least we're half way there.

Thanks Peter :)
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
I was wondering that Lauren?

Maybe you could inactivate the second and third groups and se if the first group works by itself. That will give you a big clue I think.

I'll have a look at the generator as well.
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Pickles,

Some of your URL's were incorrect. Example - http://bgreendecoratingproducts.com/ceramicspottery.php should be http://bgreendecoratingproducts.com/ceramics-and-pottery.php


Try this code:

<form name="form1">
<select style="font-size: 14px; color: rgb(0, 0, 0); font-family: verdana; background-color: rgb(255, 255, 255); font-weight: bold;" name="menu" onchange="window.open(document.form1.menu.options[document.form1.menu.selectedIndex].value);">
<option value="">Choose House</option>
<option value="http://bgreendecoratingproducts.com/antiques.php">Antiques</option>

<option
value="http://bgreendecoratingproducts.com/advertising.php">Advertising</option>
<option
value="http://bgreendecoratingproducts.com/ceramics-and-pottery.php">Ceramics/Pottery</option>
<option
value="http://bgreendecoratingproducts.com/crafts.php">Crafts</option>
<option
value="http://bgreendecoratingproducts.com/dolls-and-bears.php">Dolls/Bears</option>
<option
value="http://bgreendecoratingproducts.com/finearts.php">Fine Arts</option>
<option value="http://bgreendecoratingproducts.com/glass.php">Glass</option>
<option
value="http://bgreendecoratingproducts.com/holiday-and-seasonal.php">Holiday/Seasonal</option>
<option
value="http://bgreendecoratingproducts.com/housewares.php">Housewares</option>
<option
value="http://bgreendecoratingproducts.com/literature.php">Literature</option>

<option
value="http://bgreendecoratingproducts.com/metalware.php">Metalware</option>
<option
value="http://bgreendecoratingproducts.com/textiles.php">Textiles</option>
<option
value="http://bgreendecoratingproducts.com/woodenware.php">Woodenware</option>
<option
value="http://bgreendecoratingproducts.com./toys.php">Toys</option>
</select>
</form>
<form
name="form2">
<select style="font-size: 14px; color: rgb(0, 0, 0); font-family: verdana; background-color: rgb(255, 255, 255); font-weight: bold;" name="menu" onchange="window.open(document.form2.menu.options[document.form2.menu.selectedIndex].value);">
<option value="">Choose Office</option>
<option value="http://bgreendecoratingproducts.com/antiques.php">Antiques</option>
<option
value="http://bgreendecoratingproducts.com/ceramics-and-pottery.php">Ceramics/Pottery</option>

<option
value="http://bgreendecoratingproducts.com/finearts.php">Fine Arts</option>
<option value="http://bgreendecoratingproducts.com/glass.php">Glass</option>
<option
value="http://bgreendecoratingproducts.com/housewares.php">Housewares</option>
<option
value="http://bgreendecoratingproducts.com/metalware.php">Metalware</option>
<option
value="http://bgreendecoratingproducts.com/woodenware.php">Woodenware</option>
</select>
</form>
<form
name="form3">
<select style="font-size: 14px; color: rgb(0, 0, 0); font-family: verdana; background-color: rgb(255, 255, 255); font-weight: bold;" name="menu" onchange="window.open(document.form3.menu.options[document.form3.menu.selectedIndex].value);">
<option value="">Choose Garden</option>
<option value="http://bgreendecoratingproducts.com/antiques.php">Antiques</option>

<option
value="http://bgreendecoratingproducts.com/ceramics-and-pottery.php">Ceramics/Pottery</option>
<option
value="http://bgreendecoratingproducts.com/glass.php">Glass</option>
<option
value="http://bgreendecoratingproducts.com/metalware.php">Metalware</option>
<option
value="http://bgreendecoratingproducts.com/woodenware.php">Woodenware</option>
</select>
</form>
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Sorry Pickles - the URL's are being cut off. Can you email support@synthasite.com and I will give you the code.
Photo of Pickles

Pickles

  • 87 Posts
  • 0 Reply Likes
Hello, kershnee

If I remove the second and third boxes, the url addresses in the first box work just fine. It is only when I add the second and third boxes to the coding is when the problem starts. I am in Firefox when I do my coding changes.

I need to lay down. Getting dizzy and can't think too well. Have the flu. Maybe tomorrow I'll be able to think better.

Thanks, bunches...

bgreendecoratingproducts.com

Lauren
Photo of Kershnee

Kershnee

  • 2087 Posts
  • 152 Reply Likes
Hi Pickles - I replied to your email you sent me in support. If you can reply back with the info I needed that will be great.

Hope you get better!!
Photo of Thomas

Thomas

  • 2 Posts
  • 0 Reply Likes
Would be great to have drop-down menu support integrated into the yola design interface (like e.g. webnode support this).
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Thanks Thomas - we're aware that people would like this feature. In the meantime, you may be interested in this site: http://yolacodes.yolasite.com/. It has some great advice on adding drop-down menu's.