Need help creating a drop down menu

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Hi everyone,

I have gone through all of the posts about creating a drop down menu. Unfortunately I have no experience with codes! I went to this site: http://purecssmenu.com/ and created a menu and then pressed download. It created it as a zip file and I have no idea how to put that on my site. This was definitely within my knowledge except for putting it on the site since there was no code needed when creating it. But maybe that is why it was so easy because I still need code to get it on my site? I really wish I knew more!

Can anyone help me?
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes

Posted 8 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Katie

There's a couple of things you need to do before actually uploading to your File Manager. I would unzip the file on your desktop. Locate the CSS file. You will need to open it up using NotePad.

You will need to locate your image path URLs and change it to include "resources/yourimage.jpg"

Once you have done this, then you can save your file. Then upload the images and the CSS file to your File Manager.

On the page, you will need to drag over an HTML Widget and paste in this code:

<!--<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />-->

*Replace the "your-custom-styles.css" with the name of your CSS file.
*Do not include <!-- and --> as they are there to stop the code from working on the forum.

Please let me know if you have any trouble with this.
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
I am stuck about the part with the image path URL. I do not know how to change that. Can you help me?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hello Katie,

Thank you for your comment. In the example that Sanja provided ""resources/yourimage.jpg", you will replace the 'yourimage' with the actual name of your file. For example, if your image was katie.jpg, your image path URL would like like this "resources/katie.jpg".

I hope this helps, Katie. Please let us know if you need further assistance!
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
Brianna,

When i save it from the website I created it at it automatically saves it as a html document and it will not allow me to change the name. I have never created a document like this so am unfamiliar with why it will not allow the name change. Are you familiar with html documents? When I open it up in Google chrome this shows name shows up, kind of like a website

file:///C:/Users/Youth%20Group/Downloads/purecssmenu-com(5)/purecssmenu.html. When I try to change the name it will not allow me to.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Katie

You need to make the edits on the CSS file. When you unzipped your folder on your desktop, you should see a file (.css) along with your images used for your menu. Open the CSS file using NotePad and make the changes needed for your image path. Once done, save it and then upload your folder contents to your File Manager and follow the steps above.

If you need any further assistance, please let me know.
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
I opened up Notepad and then clicked open, i found the CSS file and clicked it, it then opened another page that just showed images, when I double clicked on that it said no items match your search.

I am sorry this is so hard. I am trying everything you are telling me. I wish there was an easy way to do things for those of us that have just basic knowledge. I have learned a lot using Yola, but somethings are just too hard.
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
could part of the problem be that it saved it as a chrome document? I did not choose that, it is just how it was saved. I am at my wits end with this.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Katie,

Working with code can be frustrating but we'll figure it out! If the css file has been saved as a Chrome document then this would be causing problems.

Within the folder you unzipped, you should have a file with the extension .css and a file with the extension .html. You may or may not have images depending on the menu that you picked. With Notepad, open the one with the .css extension and replace the urls as Sanja said above. Save as a .css file and upload to file manager. Upload any images to file manager. Open the .html file in Notepad and change any urls in there as well by adding the resources/
This file should also have the link to the .css file just be sure that you have resources/ in that url as well. Finally, copy and paste the html code and paste into an HTML widget on your site.

Finally, if you still can't get it, please send an email to support@yola.com and indicate the following: the url of your site and the menu that you picked from purecssmenu.com.

Thanks for working with us on this!
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
I just e-mailed you
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
I have to put the kids to sleep. I guess we can continue this in the morning.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Katie,

It hasn't come through. Would you mind sending it again? Thanks.
Photo of Katie

Katie

  • 205 Posts
  • 0 Reply Likes
I sent another one this morning!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Katie. Your email has now come through. I'll forward this to Diane.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Katie,

I answered you in support but I will add a note here for anyone following this thread.

We were all confused :) Purecssmenu.com does not provide a .css file. Sounds like it should from the name but it doesn't! It only had an html file. So the images should be uploaded to the file manager. Then open the html file in Notepad and change the urls of the images. Copy the code and paste into an HTML widget on your page. Save and publish.

Let us know if you have any problems with the menu. Sorry for the confusion!
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
Hi folks, I'm going through this very process at the moment. I've uploaded my files, renamed all of the image files with "resources/", and lastly I entered <!--<link href="resources/your-custom-style.css" rel="stylesheet" type="text/css" media="screen" />--> (without the extra bits) into an html widget on my page.

Sadly, the html widget seems to be remaining resolutely blank.

Have you any idea what I'm doing wrong?

p.s. I seem to be having issues with changes I make not appearing, or my site reverts to a previous version, I'm not sure if this is the problem, and I'm not seeing the most up-to-date version.

Thanks in advance!
Photo of Justine

Justine

  • 751 Posts
  • 45 Reply Likes
Hi Ian,

Could you try using "/link>" as the end tag?
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
Oh yeah! Done that now, no luck. :(

Apologies for the late reply, I didn't get a notification, I think Facebook is a bit haphazard for such things!
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
Anything else I could try?
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Ian,
I'm going to have the HTML team take a peek at this with you. They will reply when they next arrive online. Thanks for your patience!
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
You're a star :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Ian,

Do you mind sharing your URL where you're trying to set this up? What is the name of your CSS file?

Thanks for your patience as we work on this together.
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
Hi Sanja,

The URL of interest is http://www.rugbyleagueratings.com/, and the name of the css file is pro_dropdown_2.css
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Thanks, Ian. I am sending this information to Sanja now. I am certain she'll reply when she next comes online. Thanks again for your patience and cooperation as she assists you with this.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Ian,

Your CSS file is correctly linked. However, I don't see any HTML codes to activate the code? You should be supplied with both the CSS file and the HTML mark-up. Do you recall seeing the HTML mark-up?
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
I put some HTML in a widget at the top of the main body of the page. Is this not enough?

All I received in the download otherwise were the relevant image files, the css file and a javascript file. Could this be what's needed?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Ian,

You should have a .js file called "stuHover.js". This needs to be uploaded to your File Manager. Then you need to link to this file. e.g.



<script src="resources/stuHover.js" type="text/javascript"></script>
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
That sounds sensible! I've now done that on my index page with no noticeable effect. Am I still missing something?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Ian,

You were now missing the HTML code part to activate the menu. I've added this in for you. You also will need to img src path in your CSS stylesheet to your images that you've uploaded for the menu background.
Photo of Ian

Ian

  • 15 Posts
  • 0 Reply Likes
Thank you! I spotted that it began working! Shame it doesn't fit it with my current design, but I'll hopefully work out how to make it fit :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm glad that you were able to fix it up. I hope you can find a way to integrate this into your current design!