Making a custom menu, could use some help

  • Question
  • Updated 9 years ago
  • Answered
Ok... so I found a css menu generator and the menu looks great, but unsure of why I can't get it to work... here's the code...

<!--

<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a id="current" href="http://dons-web-design.info" target="_self" >Web Design</a>
<ul>
<li><a href="http://dons-web-design.info/our-packages" target="_self">Our Packages</a></li>
<li><a href="http://dons-web-design.info/our-mission" target="_self">Our Mission</a></li>
<li><a href="http://dons-web-design.info/contact-us" target="_self">Contact Us</a></li>
<li><a href="http://dons-web-design.info/our-clients" target="_self">Our Clients</a></li>
</ul>
</li>
<li><a href="http://dons-web-design.info/advertise" target="_self" >Advertise</a>
<ul>
<li><a href="http://dons-web-design.info/advertise..." target="_self">Your Business</a></li>
<li><a href="http://dons-web-design.info/advertise..." target="_self">Don\'s Web Design</a></li>
</ul>
</li>
<li><a href="http://dons-web-design.info/features" target="_self" >Features</a>
<ul>
<li><a href="http://dons-web-design.info/features-..." target="_self">Menu</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Background</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Template</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Domains</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Email</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Slideshows</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Images</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Logos</a></li>
<li><a href="http://dons-web-design.info/features-..." target="_self">Banners</a></li>
<li><a href="" target=""></a></li>
<li><a href="" target=""></a></li>
</ul>
</li>
<li><a href="http://dons-web-design.info/marketing" target="_self" >Marketing</a>
<ul>
<li><a href="http://dons-web-design.info/marketing..." target="_self">SEO Marketing</a></li>
<li><a href="http://dons-web-design.info/marketing..." target="_self">Google Index</a></li>
<li><a href="http://dons-web-design.info/marketing..." target="_self">Yahoo Index</a></li>
<li><a href="http://dons-web-design.info/marketing..." target="_self">Website Directories</a></li>
</ul>
</li>
</ul>
</div>

-->

it makes the menu into an outline instead of a menu with drop downs like it's suppose to be.

The source is...

http://www.cssmenumaker.com/builder
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.com

Posted 9 years ago

Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Your link doesn't work for me, Donald.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Awesome figured it out and looking "kinda" good

the default link to the file in file manager in the code provided was... menu/menu_style.css but with yola, it's "resources/menu_style.css"

However, it looks good, but it didn't come out exactly the way the preview was on their site. Maybe someone can figure that out!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Great job Donald for catching that important point. I was just about to tell you the same :)

Can you please post your link where you've set up the menu? And we can maybe try to figure out why it's not looking the same?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
well, I'm still kind of new to this type of stuff, I've never actually used a custom menu before. All I know is where I created the menu at... perhaps you can test it out with a small menu and see if you can solve the issue. The link in the second reply should be the correct link to get started. Help is appreciated, but like I said, it's working, just not as good as it can be!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
I'm actually trying to create this site to be an example of what a customer can have, therefore paying extra attention to detail, looks, graphics, menus, etc. I've been researching and came to the conclusion most websites are a minimum of $199 to have built for you. It sounds like a good opportunity for me. By the way, maybe you can answer my other threads regarding YEP. One in particular is regarding the limitation of five sites and building sites for others. How does that work? Am I limited to building 5 websites for other people?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
The only problem though, it only works in the published site. Not sitebuilder or previews. This makes creating a site not as easy as it could be cause in the sitebuilder it's going to show as a long list.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Here... check it out... http://www.dons-web-design.info/ - although, the links in the menu don't work yet, I still have to create those pages.

And for those that use the complex dynamic drive website, get rid of that. This generator is far much easier than that ever will be.
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Donald, I've used these menus and they do show in the sitebuilder.

The reason yours doesn't show in your sitebuilder, may be because you have the
"@import" in your style sheet link. If you've uploaded the style sheet to your file manager, you don't need that part.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, I'll try deleting that.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
When I deleted @import, it didn't even work at all. So I put it back. I don't think that's the problem with this particular code.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
There are two images that go with this make sure they're uploaded and have resources in the url. As for your question above regarding the 5 site limitation--I create a new account for each client.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, I thought of that as I was creating my packages I plan on selling.

As you can see above, my original problem was because their default url for the .css file was different than Yola's, guessing the images in the file manager are also different in this code and could be my problem. But I don't see a code for these images... how do I make sure the images in file manager are linked to this code because I am pretty sure they are both in file manager!?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
The images are referenced in the css file. See the screenshots:


Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
can I edit the .css file? I would need to change "images/menu-bg.gif" to "resources/menu-bg.gif" right?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
well, I edited it to read resources instead of images and that didn't solve the problem. Any help?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
put this code at the beginning of the css file (without the <!-- and the -->): <!--<style type="text/css">-->
and put this at the end of the file: <!--</style>-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, I'll try that.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Nothing I've tried works. This is my current code...

<!--

<style type="text/css">.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}
</style>

-->

and I've tried other things, I've tried changing images to resources, I've tried adding a href which is how an url normally is. I can't seem to solve the issue.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
hmmm...it definitely should say resources not images. Can you try it one more time? Oh, and you should publish it as well--I had to publish my test page to get it to show up.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
yea, I've tried that previously as well... I'll try once more!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
<!--
Donald,

You don't need to add an href, you need to add: img src="" but that is for html not css. What you need to have at the part background:url(images/current-bg.gif) is (resources/path/current-bg.gif)

Just change the path part.

Also, I do not know what the @import is supposed to be (possibly and old style of calling css files). Get rid of it for now. But you need to add this code:

<link rel="stylesheet" type="text/css" href="resources/Donald'scss.css" />

That should fix it, just watch for typo's :D
-->
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, still not getting it. let's try another idea. Can someone show me their test site with this menu and provide me the EXACT html code they have used and the exact css file they have used and tell me exactly what files they have uploaded to their file manager and maybe I can find out what's different from mine to theirs!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
On your page you put @import "/resources/menu_style.css";

Take out the first slash so it says @import "resources/menu_style.css";

I'll try later when I get home to make the menu on my website if this doesn't work.
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Okay, I just realized I just copied and pasted the css code to an html widget so maybe that has something to do with it--didn't Lee have trouble with making changes to uploaded css files? Maybe Sanja or Monique will remember. If that's the case, maybe it's not taking the change when you add "resources." Just a thought. Anyway here's what I did: copied and pasted the following code to an html widget:
<style type="text/css">
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(resources/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #9f9f9f;
border-right:2px solid #9f9f9f;
border-bottom:2px solid #9f9f9f;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(resources/current-bg.gif) top left repeat-x;
color:#ffffff;
}
</style>

Next I copied and pasted the following to another html widget below the first one:
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a id="current" href="fred" target="_self" >fred</a>
</li>
</ul>
</div></style>

Here's what I ended up with: http://testvillage2.yolasite.com/dons...
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
ok, I'm getting somewhere... but I'm not there yet.

It's working in sitebuilder and preview, but not published site and YES I did republish my site since I've made the changes...

http://sitebuilder.yola.com/sites/D7d...

http://dons-web-design.info

by the way, feel free to look at my "our packages" page under the Web Design tab... and tell me what you think about the packages and if something needs to change, since I am new to building sites for other ppl.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Have you tried clearing the cache since publishing? This may do the trick!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
why... do you see a good menu in both the sitebuilder and published site?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Grpflehmsgl--I don't know why it's not working in the published site. I'm going to blame Yola! LOL Possibly it's the template? But that doesn't really make sense either. Anybody with an idea?

Your prices look fine but the packages seem a bit convoluted and confusing--at least to me! Maybe you could just put what it includes and leave the extra pricing stuff for a separate paragraph.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
kind of like the check mark system yola uses to compare Yola Free and Yola Silver!?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Yeah, that would be simpler.
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Hey Donald, what exactly is the menu supposed to look like? Do you have an example?
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
If you viewed the site preview link, that's what it's suppose to look like but it's not on the published site!
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
Other than solving the bugs I have, I believe this to be the best menu creator I've ever used, it's very easy to create compared to the complex dynamic menu site everyone uses. Once I figure the bugs out, I'll know what the problem was for future menus...

However, I have a question good for programmers...

Is there a way, to make a code read the menu 100% from a file? Therefore, all you have to do is edit the file and all menus on all pages will be dynamically modified rather than having to edit them with each page. Because with large websites like my encyclopedia, it will be VERY difficult and time consuming to edit a menu like this!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
There are a bunch a ways to do that, but unfortunately they are all server side coding. But on my site http://teamironblood.org The menu (it's red) is a .js file and all I have to do is edit that file and it changes everywhere on my site.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
so then I would need Yola silver cause I can't upload javascript files. But hopefully I can afford Yola Silver some day lol