Anyone know of any good csss menus?

  • 1
  • Question
  • Updated 9 years ago
  • Answered
hi,

i sam making another website, like lees hexham site but for an area close to home,

Filey UK

for the site i need a new menu but i cant find one,

please can i have some suggestions?

Alex

http://sportie.yolasite.com
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
  • happy

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Ummm.. Yola Code Site?! =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i have looked but nothing has fitted the spot, i will look again though!

Alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
If nothing fits the bill.. can you describe what you're looking for? Maybe I can find one that will better meet your needs.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
well i am looking for somthing that is bright colourfull but calm, it is for a sea side town so calm isnt too important.

i am mainly bothered about colourfull,

Alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Some of the menus you can customize to better match your scheme. I suggest you pick a style that you like, then we can see if we can customize it to match your theme.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
look below,
i found one
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Littleus!

i found the menu
its at
http://www.webvamp.co.uk/blog/coding/...
its perfect,

can you help me set it up?

(if you want)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
just copying the code thats there dont work
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay Alex.. let me see if I can get it to work.. hang tight.... =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Alex.. before I can proceed.. you have to make your buttons! I thought they were offering the buttons for you to select and download but this is not the case. So.. make your buttons, then get back to me when you're done.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ahh, let me do that!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littlleus!

image 1



image 2



Alex
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay.. my bad..

You do need to download the image they gave you!

Then, when you copy the css code, be sure to wrap the code with
<style type="text/css>
THE CSS CODE GOES IN HERE
</style>
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay :)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
hey littleus, there is a problem,

the 2 codes dont fit together
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
can you give me that code?

can you emil it to me?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Put the HTML code they give you in a second HTML box. CSS goes in the 1st HTML box.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
can you give me that code?

can you emil it to me?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Done! =D
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
okay :)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
okay this is a bit off topic but is this the Filey near Whitby because if it is I live in Whitby its good to know people near by are also using yola and not just me.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ohh i dont live in filey but i know somone with an apartment there!
i go to scarbrough & whitby alot!
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Cool,nice to know there is someone close to home,I live in sleights near little Whitby :D
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
everytime i go to whitby it rains :(
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
I know I am a little off topic but, does csss stand for Cascading Super Style Sheets? lol, just messin with ya Alex
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i know, small typo
(what goes around comes around!
i messed witgh ed about a typo, now its your turn dan!)
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
s'ti ko ydobyreve sekam sekatsim ecno ni a elihw. i ma erus i lliw ekam eno noos
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
Its okay everybody makes mistakes once in a while. i am sure i will one soon

i am clever!!!
i can read backwards!
& it doesnt make sence!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Wow... I'm impressed Alex! here I was trying to think of what language that could be. I even pulled out the good old google translator which was of no help to me... duh.. no wonder why! LOL!!!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littleus!

how do i ad more tabs to it???
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think you may need to look at something else?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
no no no,

i have fixed the problem!!

i now have another!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
wonderful! did you just make another button then?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
no just edited the old one but i got rid if the text

i will only be 3 mins then i am done!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Clever gent! =)
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
hey!
i am nearly done!
about 2 mins & its finished!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
It's been 3 minutes
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ey!

i have encountered a technicul difficulty
9in a nut shell somthing has gone wrong!)
:( BOO HOO!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
what's happen to it? anything i can do to help?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
well its the bottom code,

it keeps going wrong!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Do you perhaps know where lu got the code from? Usually if it's off the web it has something like this:
//--This must stay intact for use
//--This code was made by freecode.orgnet
Something like that. Usually at the top.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i found the code,
its
below
http://www.webvamp.co.uk/blog/coding/...
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i need more that 3 tabs but it keeps going wrong,

here is the offending code

<!--
<ul class="cssmenu"> <li class="home"><a href="#" class="selected" title="Home"><span class="displace">Home</span></a></li> <li class="blog"><a href="#" title="Blog"><span class="displace">Blog</span></a></li> <li class="contact"><a href="#" title="Contact"><span class="displace">Contact</span></a></li> </ul>
-->
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
It won't work if you add another:
<!--
<li class="something"><href="#" title="something"><span class="displace">Something</span.</a>
-->
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
ohh
yes, it doesnt work for me anyway, why dony you try??
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
I've been looking at the website you gave me and you do know there is two separate codes right? Or I believe they are used separate. Anyway, for that long css code you have to add more. Example below:
For each section of that css code there is a
ul.cssmenu li.contact a.selected {
background-position: -300px -132px;
}

You have to add your own for each of the tabs you want to add.
Also do you have the sprite.gif image that they keep talking about?
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
yup
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I believe the problem lies in the fact that the sprite image they gave you is only intended for 3 buttons. They based the whole code on those three buttons. If you want to add more buttons, you need to reconstruct the gif image and then you'll need to figure out the image mapping in the css.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I think you're better off getting a new css menu Alex. I really think that one of the ones on the Yola Code site can be more easily customized to suit your needs.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
littleus!
i edited it look what i did

see!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
That part is good.. but now you have to figure out the image mapping in the CSS coding which Dan pointed out earlier.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
we need to figure the code out!
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
What happens if you add this into the css code:

ul.cssmenu li.other a {
background-position: -300px 0;
}

and again with
ul.cssmenu li.pictures a {
background-position: -300px 0;
}

Then go to the html code and put in new:
<!--
<li class="other"><href="#" title="other"><span class="displace">Other</span.</a>

<li class="Pictures"><href="#" title="pictures"><span class="displace">Pictures</span.</a>

-->
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
Well on the bright side, I get 4 oppertunities to click "Home"
I just tried it. I can't even get that to show up. It seems to me this is a really weird code.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
The css set up like an image mapping. So, it selects one of the colored buttons based on the mapping inside the css. It's definitely more on the complicated side.
Photo of Grace

Grace

  • 76 Posts
  • 2 Reply Likes
Alex,

You want a CSS menu with more than three tabs, right? I can help with that. Just go to this site: http://purecssmenu.com.
It generates the codes for you for making a menu, plus you can even make a sub menu. Once you're done with menu, all you
have to do is download, the file. Next you should follow these steps.

1. Upload file into yola.

2. Insert an html widget file, connecting the file that you just uploaded.

3. Look at the preview, click the file then open it. A file should appear. Look for the name you labeled your menu. In
this case, I labeled it cssmenu. Click on it.

4. A new page should appear with the menu. Go to page (top right), and click view source. Copy the code.

5. Go back to the site builder and insert an html widget, and paste the code.

6. You're done. It should work.

PS - To take out all those line breaks just erase these:
. Their at the bottom of the code in the html widget.

Here's a test page if you want: http://css-test.yolasite.com/.

Hope this helps.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
thanks grace but its not what i a after, the code i have & need is thhe problem.
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
I don't know how you got that to show up. This is what I get:


Now I have to send an email to Yola because I found how to hide the footer. I want to tell them so other people can't do it!
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
i know about 3 ways to hide or edit the footer,
should i email them too?
Photo of lambofgod

lambofgod

  • 875 Posts
  • 35 Reply Likes
It wouldn't hurt. I just don't want someone to try to use it maliciously use it somehow. Because the way I found out how to, I can use it that way. But I don't feel like getting arrested nor messing with people so I will never use it that way. So it's up to you to email them or not.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Alex.. I did a variation of the menu that Lee had:

http://rumballchick.yolasite.com/lee

would that work at all for you? colors are easily changed.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
well i would like the one i already have.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I'm afraid that out my league Alex. I would suggest email this code to Kershnee and see if she can help you out on that one. Sorry bud. I've never played around with image mapping so I don't understand the details of it.
Photo of Alex

Alex

  • 3448 Posts
  • 39 Reply Likes
well i could live with three.