Can Boomer Or Anyone Assist Please

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have created a little menu for my site, but cannot for the life of me master inserting buttons/tabs to make it a nice little dropdown menu of 4.
If anyone could make me 4 in a reddy/Pinky color, I would be extremely grateful.
Here is what I need them to be named:

Bodybuilding Section
Diet Info
Store/Products
Contact Us

Thanks in advance.
Margaret
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
  • Confused

Posted 9 years ago

  • 1
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Margaret,

Boomers not around at this moment so im going to ask you a few questions which will help him when he is.

1. Have you already created a menu and you want to add a drop down to it?

2. Or do you just want it to be a stand alone drop down?

3. Whats your URL.

You could also check out this see if its what your looking for
http://yolacodes.yolasite.com/dddropd...

If you have any code already leave it here like this below

<!--
CODE HERE
-->
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Thanks Lee.
Margaret, the Yola Code site was created just for this.
Have a look at the link Lee left and let us know what you would like.
You can also have a look at http://forsite.synthasite.com/tut-mou...
for a tutorial on creating normal mouseover buttons.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margaret

You may be interested in this thread as well - I've posted a single dropdown menu code for another user: http://forum.yola.com/yola/topics/can...
Photo of Emmy

Emmy

  • 5892 Posts
  • 299 Reply Likes
@ Yola Champs: Thanks for the tips for Margaret!

@Margaret: I hope these tips will work for you. It can take some time to master or even get used to custom code, but just give it some time and work with it!

Emmy
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Margaret

Can you please clarify for me what is happening when you try to upload the picture? Were you able to save the images to your desktop but you cannot upload into your file manager?

Also... the dropdown menu that I made for Denise does not need to be made with buttons. You can do simple background color and text. I just wanted to let you know this in case that was something you preferred.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margaret

Step 1: Copy the code below and paste into an HTML widget:
<style type="text/css">
#sddm
{margin: 0;
padding-left: 3px;
padding-right: 0px;
}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px Arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 101px;
background: #000000;
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background: #0033ff}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #FF0033;
border: 1px solid #000000}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 99px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #616163;
color: #FFFFFF;
font: 11px Arial}

#sddm div a:hover
{ background: #0033ff;
color: #FFFFFF}

</style>

You can change the background color and font color. A great tool to figure out the hex number or rgb color number is Colorzilla - a Firefox addon.

Step 2: Copy & paste into another HTML box. Place under the 1st one.
<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>

Step 3: Copy & paste code below in another HTML widget

<ul id="sddm"> <li><a class="linkopacity" href="nogo#" onmouseover="mopen('m7')" onmouseout="mclosetime()">YOUR TEXT LINK GOES HERE</a> <div id="m7"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"> <a href="http://yolacodes.yolasite.com/blog&qu...; <a href="http://yolacodes.yolasite.com/links&q...; <a href="http://yolacodes.yolasite.com/contact...; <a href="http://yolacodes.yolasite.com/rules&q...; </li> </ul>

Replace the links and text with your own.

Please let me know if you need further assistance.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm glad to hear that it's working out for you! To link to your pages, you'll need to change the a href link to your page.

See up above? it says
a href="http://yolacodes.yolasite.com/blog" - replace the http:// url with your own.

So it would look like this: a href="http://www.skintime4u.com/YOUR PAGE"
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Littleus, would you put them in order for me, so I can just copy/paste it in lol, I'm getting in a mess ;(

Here is the info, where does this go in the last part, I've tried a few times, but keep getting the message 'can't find the page', I'm messing up on the linking somehow.

http://www.skintime4u.com, the page is Bodybuilding Section
http://www.skintime4u.com, the page is Diet and Exercise
http://www.skintime4u.com, the page is Store - Products
http://www.skintime4u.com, the page is Contacts
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Should the "your page" be the title of one button or the titles of the 4?
When I go check it, there is only one buton showng?
Heeeelp.
Margaret
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Do these below, go into one button, or do I need to repeat all of the above 4 times?
http://www.skintime4u.com, the page is Bodybuilding Section
http://www.skintime4u.com, the page is Diet and Exercise
http://www.skintime4u.com, the page is Store - Products
http://www.skintime4u.com, the page is Contacts

Arghhhhhh
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Hi Margaret,

Littleus is not around at this moment

Delete the (step 3) code form your site. Yove messed up the code.

Re apply this.

<ul id="sddm"> <li><a class="linkopacity" href="nogo#" onmouseover="mopen('m7')" onmouseout="mclosetime()">YOUR TEXT LINK GOES HERE</a> <div id="m7"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"> <a href="http://www.skintime4u.com/bodybuilder... Building</a> <a href="http://www.skintime4u.com/diet-info.p... & Exercise</a> <a href="http://www.skintime4u.com/store---pro... / Products</a> <a href="http://www.skintime4u.com/contacts.ph...> </li> </ul>

where it says - YOUR TEXT LINK GOES HERE - change that to whatever you like, be carefull not to delete anything around it when you do it.

-->

Lee
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Hi Lee
Did what you said to the letter, but it just staes - 404 not found? Strange :(
Margaret
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
and it's still only showing one button, grrrrr.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Margaret -

it works for me http://testit.yolasite.com/fewfewfew

i would start again add the step 1 and 2 littleus gave you above

then add the step 3 i added

see if it works then try to change the colours.

Lee.
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Well, I can see yours working and it's great, but I have tried everything.
I tried in firefox, explorer, completely removed the html boxes and started again and still no success, I know it must be me, but I am copying it all very carefully into the 3 html boxes and I cannot understand where it's going wrong.
The color on the hover changes, but it just doesn't drop down.

Margaret
Would you go in and do it for me, then you can see what I've done.
I added the codes to the boxes you see here, exactly to the letter.

Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
It wont work in the builder thats normal... have you checked to see if it works on the 'preview' or when published?
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Yes, am just checking it now after being published, the darn thing just won't drop down, isn't that strange,?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
try and pull the 2 html widgets (step1 and 2) up to the top of the page - if that does not work (after republshing) you could send me your log in details and i'll get it working for you... DONT add them here email me admin@hexham.info

In the email also add what you what written where it currently says 'your text link goes here' - perhaps 'site menu' or similar would work.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margaret!

I'm just looking over the code.. and I just realized I accidentally left something in. It's not a big deal - but you need to take out this:
class="linkopacity" so it ends up looking like:

<ul id="sddm"> <li><a href="nogo#" onmouseover="mopen('m7')" onmouseout="mclosetime()">YOUR TEXT LINK GOES HERE</a> <div id="m7"onmouseover="mcancelclosetime()"onmouseout="mclosetime()"> <a href="http://www.skintime4u.com/bodybuilder... Building</a> <a href="http://www.skintime4u.com/diet-info.p... & Exercise</a> <a href="http://www.skintime4u.com/store---pro... / Products</a> <a href="http://www.skintime4u.com/contacts.ph...; </li> </ul>

The main reason why your code is not working is because you've broken up the lines in your second HTML code. This is what you have:


<script type="text/javascript">

// Copyright 2006-2007
javascript-array.com

var timeout = 500;
var closetimer = 0;
var
ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
//
cancel close timer
mcancelclosetime();

// close old
layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get
new layer and show it
ddmenuitem =
document.getElementById(id);
ddmenuitem.style.visibility =
'visible';

}
// close showed layer
function
mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility =
'hidden';
}

// go close timer
function
mclosetime()
{
closetimer = window.setTimeout(mclose,
timeout);
}

// cancel close timer
function
mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer
= null;
}
}

// close layer when click-out
document.onclick =
mclose;

</script>


It should really look like this:

<script type="text/javascript">

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>


Can you try again re-adding the second HTML code? Please let us know how this goes.
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Well, I've tried every which way, it's probably me, well, I would say "definately me"...somehow, I've goofed, ahhhhh, story of my life.

Thanks guys, for the tremendous help. Really appreciate it!

Lee, have sent you email.

Margaret
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Margaret.. I'm sorry that the results have not been forthcoming. I see from your post that you have sent Lee an email. I'm confident that he'll set things straight. If you need any further help.. please do let me know. =)
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Thank you littleus
I'm still trying because I haven't heard from Lee in a while, I was hoping to catch him before going to bed in about half an hour, I will keep you updated.
Sorry it's been such a pain, I have inserted everything as I should have, but I get the feeling I've goofed, but don't know how.

Thanks for all your help.

Margaret
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Would you like me to take another look? Perhaps I can sort it out?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I took another peek at your site. I discovered that you have a MS Word formatting all through your site. This can create many problems with your site. You should not copy and paste from MS Word into your site builder. What you need to do is copy and paste your MS Word into Notepad - this will strip away the inherent formatting. Then, copy and paste into Notepad. Can you please try removing all the MS Word formatting and then we can take a closer look at what's happening.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi, Margaret,

I think we live in different parts of the world :)

Ok, I'm more than willing to go into your site and fix the menu and tidy up the MS Word formatting... but i'm going to need your password.

I recieved your email (i presume that is the email address you use to sign into Yola) -- If you could send me another 1 with the password included, as soon as i get it i'll go in and do it... we'll get this sorted today for sure.

Lee.
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Yes, but I've just forwarded you a copy of it, keep me informed.
Thanks Lee.
Margaret
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Margaret,

I'm in now, please sign out if you are signed in and i will let you know when i'm done.

Lee.
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
OK, am out now. Thanks Lee

Margaret
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Magaret,

I have got the menu to work... but i can not get it to follow the CSS colour instructions.

I have been very busy deleting all the MS Word formatting form your home page but it still wont listen to the colour changes.

Maybe if we get Littleus to re write the CSS and try to apply it straight to the page.

I hope your pleased with the changes i have made.

PLEASE - do not copy in from Word - it really messes the page up.

Lee.

Go see - http://skintime4u.com
Photo of Margaret

Margaret

  • 47 Posts
  • 0 Reply Likes
Thanks Lee, I'm very glad it's sorted, I will keep that in mind about MS Word, Didn't realise.
You've done a stirling job and it looks grand, I know that was a lot of work, I really appreciate it.
I think Yola should give you a pay rise ;)
How do I find out where the MS word formatting is, so I can remove it from other sites? No wonder things are messed up my end! How do I remove it?
Thanks Lee, everything is great, just hope Littleus won't mind if I ask how to get the color scheme working.
Thank you so much - Very much appreciated
Margaret
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
A pay rise? - If i got double what i get now i would still get nothing - i do this out of the goodness of my heart :) - I like helping people :)

Lets see what Littleus does the with the CSS.

Speak later - Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
The best way to remove MS formatting is copy the text (you have added using word) from the text widget into NOTEPAD... then cut and paste it back into a new text widget - do any style changes when it comes back in clean.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey everyone

I've posted how to change the color on the CSS on the other thread: http://forum.yola.com/yola/topics/lit...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Littleus - i tried to change those values but the page would'nt accept it - do you think if you get time you could test it in flower shop.

All the MS formatting is now removed but its not playing ball.

Lee.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I was able to change the color values in Flowershop. Margaret - do you mind if I went into your site builder to see what's going on? Can you send me the info at support@yola.com Attn to Littleus. Thanks!