Creating a dropdown menu

  • 1
  • Question
  • Updated 8 years ago
  • Answered
I'm just having the most horrendous time creating a dropdown menu as per the tutorial http://yolacodes.yolasite.com/ - trying to create a vertical fly-menu. All seems find uptil the point of "styling" the menu.

I'm not an expert, in fact I only learned about HTML codes etc. when I started to create this website a couple of months ago, so I am really "green" in this respect.

Can anyone help? This is so frustrating.
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
  • frustrated!

Posted 8 years ago

  • 1
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hello Sydney,

I'm going ask Sanja to help you with this - she's the person who takes care of the Yolacodes site and is most experience with the menu you're trying to implement. She's offline at the moment though, so I apologize for the delay in the meantime.
Photo of yolafan

yolafan

  • 135 Posts
  • 3 Reply Likes
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
Thanks, this is a BRILLIANT program. However, I still struggle with getting it on to my Yola website. Maybe I'm stupid or something, but the code doesn't work like it's supposed to. Do I simply paste it into an HTML widget? Because that doesn't work. Aargghh!
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
If it generates HTML code with a script, you will be able to add it inside an HTML Widget. Please see the Adding HTML tutorial for more help on how to do this.
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
Thanks Nazlie. However, this does not help either. I keep getting a blank block on my website.
Any other suggestions?

Here's the code, maybe you see the problem that I can't:

ScWinWdth+LScrlld)SubLt=ScWinWdth+LScrlld-CCW}
else{ if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=this.Level==1?ScWinWdth+LScrlld-CCW:SubLt-(CCW+(1-2*ChildOverlap)*ThisWt);
if(SubLtTpScrlld+ScWinHght)SubTp=this.Level==1?SubTp=TpScrlld+ScWinHght-CCH:SubTp-CCH+(1-2*ChildVerticalOverlap)*ThisHt;
if(SubTp0;i--){
WMnu=MName+eval(i);
NoOffSubs=eval(WMnu+'[3]');
PrvMmbr=Mbr;
if(NoOffSubs)Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
Mbr=Mbr.PrvMbr}
RcrsLvl--}

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

Your browser does not support script

<!-- REST OF BODY CONTENT BELOW HERE -->
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Sydney,

To paste code into this forum please use this tag to keep it from rendering or truncating: <!--your code goes in here-->.

From there we'll be happy to have our HTML team take a look and offer any suggestions they may have.

We appreciate your patience while they review your inquiry.
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
The HTML part of the code is fine, but as soon as I add the CSS bit, it goes wrong. Does the HTML widget not support CSS? There are other less complicated dropdown menus as per the tutorial, but they don't look good on my website and are also not multi-layered.
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Sydney

Yes, you will be able to use CSS in the HTML Widget, but you will either have to add it inline or using this tag: CSS goes here

If you need more help, please let us know!
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
Hi, Laura and Nazlie.
Thanks for all your help. I've done all you've suggested and still can only get the HTML part right - the CSS styling part doesn't pull through. So I'm stuck with a plain text menu that looks awful. Can anything else be wrong?

I've read several articles on the internet regarding CSS codes and "inline". If I understand correct that means that I should add the CSS part below the HTML part (in the same widget) without spaces and between < >? I really have no prior experience with programming, etc, so please bear with me.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Sydney

Can you let me know the code you are using to add your CSS? I'm wondering if the problem lies with that? If possible, can you paste your CSS code here? Thanks!
Photo of Sydney Brand

Sydney Brand

  • 20 Posts
  • 1 Reply Like
Hi, Sanja.
This is the code I get from the Coffee Cup software Yolafan suggested. The menu looks so wonderful, just wish I could load it onto my site.

Hope I did it right and the code is not truncated!
<
ScWinWdth+LScrlld)SubLt=ScWinWdth+LScrlld-CCW}
else{ if(SubLt+CCW>ScWinWdth+LScrlld)SubLt=this.Level==1?ScWinWdth+LScrlld-CCW:SubLt-(CCW+(1-2*ChildOverlap)*ThisWt);
if(SubLtTpScrlld+ScWinHght)SubTp=this.Level==1?SubTp=TpScrlld+ScWinHght-CCH:SubTp-CCH+(1-2*ChildVerticalOverlap)*ThisHt;
if(SubTp0;i--){
WMnu=MName+eval(i);
NoOffSubs=eval(WMnu+'[3]');
PrvMmbr=Mbr;
if(NoOffSubs)Mbr.ChildCntnr=CreateMenuStructure(WMnu+'_',NoOffSubs);
Mbr=Mbr.PrvMbr}
RcrsLvl--}

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

Your browser does not support script

<!-- REST OF BODY CONTENT BELOW HERE -->
>
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Thanks for sharing the code. We will take a look and let you know if we or someone else on the forum are able to assist you!
Photo of Nazlie

Nazlie

  • 1721 Posts
  • 51 Reply Likes
Hi Sydney

We have experimented with the Coffee Cup code. It will be possible to add it, but it takes some advanced web development skills to do so. It is not something that we currently offer as we do not have the resources available to guide you through the process of adding this to your site or helping you maintain or fix the code that you add.

To use CoffeCup, you will need to add the Javascript (.js) and CSS (.css) files to your File Manager. Please note that only Yola Silver subscribers are able to upload .js files. You will then need to create absolute paths for your files and reference the JavaScript and CSS elements.

If you would like to experiment further with your code, I can suggest that you ask other forum members for more help or search Google or W3 schools and A List Apart, which are fantastic resources for help with web development and coding problems.

Good luck!
Nazlie