YOLA USERS = FREE ROUNDED CORNER MENUS...

  • 3
  • Idea
  • Updated 4 years ago
Hello,

FREE EASY CUSTOMIZABLE ROUNDED CORNER MENUS.

Go get them >>> http://css3.yolasite.com/

I would like to share with the Yola community a peice of css I have written which allows you to very easily add a custom menu to your site.

All you have to do is follow 2 very simple steps and then change the colours to match your style.

They are not yet available in all browsers, I will update them as and when technology allows.

NOTE: MENU 1 ONLY SHOWS IN FIREFOX 3.6 OR HIGHER.

Hope you like them - They are free to use for Yola users but I ask you do not claim that they are your own. It took me 2 days to write them, if you use them and you want to show your appreciation please add a back link to my main site http://hexham.info

If you need any help adding them to your Yola site or customizing them the way you want... just ask on this thread.

Go get them >>> http://css3.yolasite.com/

Lee.

PS. If you edit either of the menus and your pleased with the colour scheme, post your URL here so I can check them out :)
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes

Posted 9 years ago

  • 3
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
UK Duke, What a marvellous idea. Have copied and kept (also viewed what they are like) - and thank you for spending the time to do so for all Yola users. They look great. Really appreciated. Thanks lots again
JenC
Photo of jeremy

jeremy, Employee

  • 1349 Posts
  • 90 Reply Likes
Thanks Lee!

This looks like a great add-on. Gonna be trying it on one of my sites shortly.
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
What is the website?
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
What is the website?
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
What is the website?
Photo of Kimberly

Kimberly

  • 31 Posts
  • 0 Reply Likes
Thanks Lee. I really appreciate this. :)
Photo of Margie Hearron

Margie Hearron

  • 22 Posts
  • 2 Reply Likes
Awesome!!! I love it. I'm gonna try it out on my site tomorrow. THANKS soo much. :-)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
There awesome Lee,Im gonna try them out on one of my sites :)
Got an extra week off school so im going to have a play with some colours :)
Photo of gone

gone

  • 18 Posts
  • 0 Reply Likes
Thanks Lee, your a star. I'm going to put it on a test page and have play.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I forgot to mention in the post and the CSS notes that you can change the radius of the tabs corners.

Quick tutorial:

-moz-border-radius-topleft: 4px;
does the same thing as
-webkit-border-top-left-radius: 4px;

The code is used by different browsers to display the top left of the tab, they do the same thing so always keep them the same. moz-topleft = webkit-top-left

In the menu CSS code there are 2 sets of 4 radius values. the top set of 4 control the tab in normal state and the bottom 4 on mouseover and when selected.

Have a play around with different values.

This combination produces the image below.

-moz-border-radius-topleft: 24px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 24px;
-webkit-border-top-right-radius: 4px;

-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;

Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Good work as always Lee
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
Really nice, Lee. I spend two weeks figuring out a menu. Yours is really nice. Thank you for your efforts and sharing with Yola users.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

An upside down menu on the same page....

Add this additional code between your <style> </style> tags.

#menu2 a:hover, #menu2 li.selected a{

border: 1px solid #CCCCCC;
border-width: 0px 1px 1px 1px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}

#menu2 a{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border: 1px solid #CCCCCC;
border-width: 0px 1px 1px 1px;
}

And use this code to show the upside down menu

<div class="css3bylee" id="menu2">
<ul>
<li><a href="http://hexham.info">&lt;span>HOME&lt;...>
<li class="selected"><a href="http://hexham.info/business.php">&lt;... A-Z</span></a></li>
<li><a href="http://hexham.info/places.php">&lt;sp...>
<li><a href="http://hexham.info/contact.php">&lt;s...>
</ul>
</div>

-->

To see the effect see the bottom of this page http://hexham.info/category/sandwich-...

Lee.
Photo of Margie

Margie

  • 286 Posts
  • 25 Reply Likes
A quick question, Duke. How did you stick the menu to the bottom of the page?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Just by adding it to a widget at that point in the page, because the css above makes it look like its upside down it just sits under the bottom of my table.

If you have an example your having trouble with I could take a look.

Lee.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
REMEMBER: If you need any help customising the menus for your own site and style let me on through this thread.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hi Duke,im loving menu 1.
I was wondering how i can get it upside down at the top of my page.
touching the bottom of the banner.
Is this possible?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

add this to the CSS

#menu2 a:hover, #menu2 li.selected a{

border: 1px solid #CCCCCC;
border-width: 0px 1px 1px 1px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}

#menu2 a{
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border: 1px solid #CCCCCC;
border-width: 0px 1px 1px 1px;
}

And use this as the outer div on the page.

<div class="css3bylee" id="menu2">

-->
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Sorry duke I didn't realise you had already posted this,Sorry for wasting your time :(
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Thanks anyway :)
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Okay ive put it on this page
http://sitebuilder.yola.com/sites/S3/...

how do i move it up to the bottom of the banner if possible?
Thanks
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

Hi John,

You could add this to the css

div#content{
margin:0px 10px 0 10px;
}

That should move it up as far as it can go, After that play round with using 2 column widgets or page layouts to move it any higher.

The page you have put it on has a 2 column structure and those columns have a 5 px padding which you can not control with css.

You could try this but its not the best way to do it. It's not even recommendable but it might do the trick.

div#content {
margin:-5px 10px 0 10px;
}

Lee.

-->
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Thanks lee,
Ive added it to my main redeisgn page tell me what you think.
http://sitebuilder.yola.com/sites/S3/...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
nice, - Are you using a 2 column page layout or are you using a 2 column widget? :) -- Lee.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Hey lee,im using the two column left layout
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
if you used a 1 column page layout then used a 2 column widget and set the top margin of the 2 column widget to about -5px it might bring the menu right up.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
i was going to do this but i wanted to keep all my side modules aligned the same on every page.But i dont mind there being a gap.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
if you used 'save page as' as you will have to with a custom menu it would save all the size settings to the next page.
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
so - stupid question time : how do I remove the standard menu and add this one?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi vasey888,

There is a button in the site builders menu called 'edit navigation' I think that does it. Lee.
Photo of Dré

Dré

  • 201 Posts
  • 15 Reply Likes
Hi vasey888,

Lee is absolutely right. Just remove all your pages from the default menu-
  1. Click on the "Edit Navigation" button on the top toolbar.

  2. A dialog box will open and you will see the list of your pages in the left-hand pane under "Pages in the Navigation".

  3. Click on the page you would like to remove and drag-and-drop it to "Pages out of the Navigation".
Photo of vasey888

vasey888

  • 51 Posts
  • 0 Reply Likes
you guys are the best!!!
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
UK Duke

Great rounded corner. Trying to use on site http://www.couponmercantile.com/ and wanted to know if there is a way to center the menu. Using it the way it's off to the left. I've tried some things and could not succeed

papa
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Papa, how are you?
Interesting use of the menu...

You could try and < center > the whole outer div. or move it into place with column widgets.

Lee.
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
UK Duke
Got Your Link To Your Site At http://www.couponmercantile.com/
Thanks for taking the time to put your code up,
papa
Photo of papa

papa

  • 327 Posts
  • 20 Reply Likes
UK Duke

The <!--<center>--> didn't seem to take affect any where, even using even tried the w3schools <!--<div style="text-align:center;>Text</div>-->.

Put the menu inside widget as you suggested and also remove the border around the outer side and seem to have much better affect.

THANK YOU for your quick reply and for taking the time for sharing the code that you developed. It is appreciated. Both your code and widget work wonderfully.

papa
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
Hey Lee,
I edited your HTML, and the menu looks great! One quick suggestion,
I would tell every one that when they put your HTML in the HTML box, that the menu, when you click on one of the "buttons", they direct the person to the page the "button" says that is on your website. That is why I had to edit the HTML.
Hope I was helpful,
Drummer
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Hi Drummer,

It does say on the pages where the menus are
'Change the URL's to point to your sites pages'

But your right I could perhaps make it clearer.

If you use the menu on your site I would love to see it - I want to see how people change it.

Lee.
Photo of Drummer

Drummer

  • 153 Posts
  • 1 Reply Like
Hey Lee,
My website is http://Drums.yolasite.com/ I put it on the bottom of every page,
Drummer
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
Nice use of the menu:



By John.
Photo of John McCarthy

John McCarthy

  • 1292 Posts
  • 99 Reply Likes
Oooh,Its only like that on one page right now,but it will be on all of them sometime :) Thanks for the awesome menu Lee.
Photo of Adam Moore

Adam Moore

  • 2 Posts
  • 0 Reply Likes
Thanks Lee for this!