Implementing custom menus into my site

  • 1
  • Question
  • Updated 9 years ago
  • Answered
I have been getting help fro the great people on the Yola support team regarding implementing custom menus into my site. I would love to hear from people in the community who have actually done this on their sites.

Do I have to use the code that is on the Yola code site or can I use code from a menu generator? If so, how exactly (step by step please) would I do this. I see so many sites with some nice looking and functional menus that I would love to have on my site as well.

Thanks!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • confident

Posted 9 years ago

  • 1
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
first which menu do you want??
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I was looking at the horizontal, accordion and vertical ones. I'm just trying to find better ways for displaying the content and pages on my site.
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
have you been to http://yolacodes.yolasite.com ??
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Randy,

Its really just a case of finding the menu you like and adding it your site.

I see on your home page that you have 2 clear menu sections, computer and music - something like a drop down menu would work well with those links, computer and music would be in the main nav and then all the other links would appear on mouse over.

Using a free account you would just add the java and css files to your page (at the top) and then add the menu code where you wanted the menu to appear.

You have to decide which style you like.

I have a custom menu http://hexham.info but its just 1 level as thats what i need for my site - you might be better off with a drop down.

Lee.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
I like purecssmenu.com It's a generator. You pick the template, change the parameters and fill in the links you want. It will generate the code to download. Upload the images (if any) and change the code so that it points correctly to the image (add "resources"). Then copy and paste the code into an HTML widget. See mine on http://www.tejutsukaimartialarts.com
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi Diane
I am very interested in creating some form of drop-down menu like yours. In fact I have created one using http://www.cssmenumaker.com . I think I have done everything right, but when I paste the code into the HTML widget, it just appears as text on the webpage. You can check it out here http://petesprinting.yolasite.com/t-s... . You will have to scroll to the bottom of the page. (I have hidden it there from potential visitors). The only thing I can think of is that the file created was .css and not .css.html like yours. Can you have a look at it and see if I'm doing anything daft?
Thanks in advance...
Pete
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--
Unless your linking to it in a sepearte CSS file the code has to be wrapped in these

<style type="text/css">

CODE HERE

</style>

I would recommned getting Yola pro - then you can upload the css as a file and it allows you to make site wide changes.

Lee. -->
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Did Lee's advice help?

Diane
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Thanks Lee

Your instructions have made the code disappear, but there is no menu in it's place?
Help!

Pete
Photo of Pete

Pete

  • 13 Posts
  • 1 Reply Like
Hi again

I tried some more code that they gave me, but didn't think it would work because they said I needed to upload the original "Menu" folder to the root directory, which Yola said I could not do. However it seems to be working anyway. I feel like an expert now!

Thanks for your help.......

Pete
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Lee and Diane!!

Diane, when you say upload the images do I upload to the Yola File manager or even on my hosting server? Can you just briefly step by step what exactly I have to do (where everything goes?) Much appreciated!!!!

I love your sites!! You did these with Yola? Wow. Very impressive.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Smithy,

I have been there but I am not sure what to do with the code once I download it. I just need some specific guidance on how to build and implement the menu. If anyone is able to make a brief screencast for me that I can watch, that would help me a great deal.

Thanks a million!!!
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
if you can tell me which one you want and then i can go into the login where i can get the code for you and post it on here.

here are 2 screenshots of the DD tab menus (Picture 1) and the drop menus (Picture 2)

Picture 1

Picture 2

which one to do you want?? please tell me which picture and what one!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks so much Smithy. I wasn't able to go to the sight you went to above. Check out the attached for the menu I am interested in trying out.

Thanks again!!!

Can you let me know how you went to the pages in your screenshot. I tried but along the way got confused as to where to go.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
If you want to try purecssmenu.com here are some more instructions. You will have to figure out purecssmenu yourself because it would be too lengthy here but it is pretty self-explanatory. It will down load a file like this to your computer:

Open the file and you will see two items like this:

Upload all the files (if any) in the Images file to your YOLA file manager.

Next open the css.html file in a text editor like Notepad or whatever you use. You will see a long page of code like this:

Find all the instances of references to the images and change them to "resources/whatever the image name is" They will look like this:

Copy all the code then go back to your yola site builder. Drag and drop an html widget from the right side to where ever you want the menu to appear on your page. The HTML editor will open. Paste your code here and click okay. Save the page and preview it to see how it looks.

Hope this helps.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
OK. I created a folder in my File Manager called menupics. The five images are in that folder. Now back to the code in the text editor. I gather that all I have to do is type in the path back to the images I uploaded into the File Manger and replace link after where it says url, background-image:url(./images/arr_white_1.gif) for all the references to the graphics in the code, copy and paste the code into a HTML widget back in my Yola site.

If I have the code in the folder in my File manager folder as described above, what is the correct path to insert after where it says URL?

Thanks!!! You have been a big help!!!

Randy

I'm not sure where exactly to insert all five .gif files (that are now up in my file manager) in the right place in the css file. I only found two instances of background-image:url and I have five .gif files.
Photo of Monique

Monique, VP of Customer Support

  • 6294 Posts
  • 446 Reply Likes
Hi Randy

I am just reading up on this thread. It sounds like people have shared some excellent suggestions with you already and that you have made some progress.

You are correct that you simply need to edit the image URL in the code in a Yola HTML widget.

The path to your files would be:

>resources/folder/file.jpg

Where:

>"resources" is the name of the File Manager (you must not change that).
>"folder" - if your file is in a folder, include the folder name.
>"file.jpg" is the name of your file.

Please ensure that the path name is identical to the one in the File Manager in terms of upper and lower-case letters, dots, dashes etc.

Hope this helps. At the rate you are going, I think you are going to end up making the video for this task, but we will see if we can beat you to it ;)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Monique. I'm just not quite sure what is meant by :

>"resources" is the name of the File Manager (you must not change that).

I know this sounds kind of daft, but where do I find the name of the File manager?
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
right randy i will get you that code and i will post it on here for you!! brb
Photo of smithy

smithy

  • 1222 Posts
  • 28 Reply Likes
hi randy.

paste this code into the top of your webpage.

<!--
<style type="text/css">.bluetabs{border-bottom: 1px solid gray;}.bluetabs ul{padding: 3px 0;margin-left: 0;margin-top: 1px;margin-bottom: 0;font: bold 12px Verdana;list-style-type: none;text-align: left; /*set to left, center, or right to align the menu as desired*/}.bluetabs li{display: inline;margin: 0;}.bluetabs li a{text-decoration: none;padding: 3px 7px;margin-right: 3px;border: 1px solid #778;color: #2d2b2b;background: white url('resources/bluetab.gif') top left repeat-x; /*THEME CHANGE HERE*/}.bluetabs li a:visited{color: #2d2b2b;}.bluetabs li a:hover{text-decoration: underline;color: #2d2b2b;}.bluetabs li.selected{}.bluetabs li.selected a{ /*selected main tab style */background-image: url('resources/bluetabactive.gif'); /*THEME CHANGE HERE*/border-bottom-color: white;}.bluetabs li.selected a:hover{ /*selected main tab style */text-decoration: none;}/* ######### Style for Drop Down Menu ######### */.dropmenudiv_b{position:absolute;top: 0;border: 1px solid #918d8d; /*THEME CHANGE HERE*/border-width: 0 1px;font:normal 12px Verdana;line-height:18px;z-index:100;background-color: white;width: 200px;visibility: hidden;}.dropmenudiv_b a{width: auto;display: block;text-indent: 5px;border: 0 solid #918d8d; /*THEME CHANGE HERE*/border-bottom-width: 1px;padding: 2px 0;text-decoration: none;color: black;}* html .dropmenudiv_b a{ /*IE only hack*/width: 100%;}.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/background-color: #edf3f3;}</style>
-->

paste this code where ever you want it to go.

<!--
<div id="bluemenu" class="bluetabs"> <ul> <li><a href="http://www.dynamicdrive.com">Home&lt;...> <li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1_b">CSS</a></li> <li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2_b">Partners</a></li> <li><a href="http://tools.dynamicdrive.com">Tools&...> </ul> </div>
-->

this is the first drop down menu.
<!--
<div id="dropmenu1_b" class="dropmenudiv_b"> <a href="http://www.dynamicdrive.com/style/css... CSS Menus</a> <a href="http://www.dynamicdrive.com/style/css... CSS Menus</a> <a href="http://www.dynamicdrive.com/style/css... CSS</a> <a href="http://www.dynamicdrive.com/style/css... CSS</a> <a href="http://www.dynamicdrive.com/style/css... and containers</a> <a href="http://www.dynamicdrive.com/style/css... and Buttons</a> <a href="http://www.dynamicdrive.com/style/css...>
-->

second menu
<!--
</div> <div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">... Reference</a> </div>
-->

please take out the <!-- nad -->. (they are there only for GS Not to read the code).

i hope this help

happy site building
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Smithy,

Thanks!!

I will look at this when I get back from doing my radio show (www.chuo.fm). It's at 12 noon EST every Sunday. If you are interested in Jazz.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Smithy,

Do I put the code in seperate HTML widgets? Could you post a screenshot of what it should look like in the Yola work area so I can get an idea of what to do? Thanks so much!!!!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Randy

Just wanted to check in to see how you were doing with this code? Please let us know if you need further assistance with this.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja,

I'm doing my radio show at the moment but when I get home I am going to try and see if I can get this going. I'm sure it is pretty straight forward. I just have to wrap my head around it. :)