Rounded and filled menu tabs

macromeister

I've been trying to do filled and rounded menu tabs. I finally got to this

/* make menu bar filled and rounded items */
.sm-page-widget-nav-toplink 
{
  border-left: 1px solid #C2C2C4;
  border-top: 1px solid #C2C2C4;
  border-right: 1px solid #C2C2C4;
  border-bottom: 1px solid #C2C2C4;
  padding: 4px 4px 4px 4px; /* padding around text*/
  border-radius:6px; /* round off the corners*/
  background: #7c7c7c; /* fill the background*/
}

You will need to change the colours for the border and background for your own page

Can anyone suggest any improvements? Anyone else done this?

See it on my site http://www.macromeister.co.uk

megmac

cool, I tried it. It showed when I clicked preview but when I published it went back to the original look. Could it be because I already have a css or two assigned to the menu?

macromeister

megmac wrote: »

cool, I tried it. It showed when I clicked preview but when I published it went back to the original look. Could it be because I already have a css or two assigned to the menu?

Possibly. What do you have? Can you post it all in code tags.

brandofamily

macromeister wrote: »

I've been trying to do filled and rounded menu tabs. I finally got to this

/* make menu bar filled and rounded items */
.sm-page-widget-nav-toplink 
{
  border-left: 1px solid #C2C2C4;
  border-top: 1px solid #C2C2C4;
  border-right: 1px solid #C2C2C4;
  border-bottom: 1px solid #C2C2C4;
  padding: 4px 4px 4px 4px; /* padding around text*/
  border-radius:6px; /* round off the corners*/
  background: #7c7c7c; /* fill the background*/
}

You will need to change the colours for the border and background for your own page

Can anyone suggest any improvements? Anyone else done this?

See it on my site http://www.macromeister.co.uk

Can something similar be done for the drop downs?

http://www.brandolinoimaging.com/Info-Pages/Welcome/n-m3b7W

macromeister

brandofamily wrote: »

Can something similar be done for the drop downs?

http://www.brandolinoimaging.com/Info-Pages/Welcome/n-m3b7W

I wondered that, but it's beyond my ken, I'm afraid!

Rocketman766

Brandofamily, love the look of your drop down menu items. I am searching how to create the rounded drop down menu items, so I came across this thread. Mind sharing how you made yours? My site hasn't been unrelieved yet, I'm still trying to get it right before I go live with it....

brandofamily

Rocketman766 wrote: »

Brandofamily, love the look of your drop down menu items. I am searching how to create the rounded drop down menu items, so I came across this thread. Mind sharing how you made yours? My site hasn't been unrelieved yet, I'm still trying to get it right before I go live with it....

Here's everything I did on my www.brandolinoimaging.com site

/********Nav Bar********/

/*Adds Hover Transition Effect to Nav Bar*/
a { 
    -webkit-transition:color 0.2s ease-in;
    -moz-transition:color 0.2s ease-in;
    transition:color 0.2s ease-in;
}

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}

/*Different Nav Bar For Homepage*/
.sm-user-ui .sm-page-home .sm-page-widget-nav {
  display: none;
}

.sm-user-ui {
   background-color: transparent;
   color: #e7e7e7;
}

/*Menu State Colors*/
.sm-user-ui a.yui3-menu-label,
.sm-user-ui a.yui3-menu-label:hover,
.sm-user-ui a.yui3-menu-label:visited,
.sm-user-ui.yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:after,
.sm-user-ui .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:after,
.sm-user-ui.yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:hover:after,
.sm-user-ui .yui3-menu-vertical .yui3-menu-can-have-children > a.yui3-menu-label:hover:after {
    color: #e7e7e7; background: rgba(31,32,33, .10);
}

/*Hover Text Color*/
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    color: #ffffff !important; 
    text-decoration:underline;
}

/*Active Page Color*/
.sm-page-widget-nav-activepage > a {
  color: orange!important;
}

/*Flyout Background*/
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
    background: rgba(31,32,33, .80);
}

/*Flyouts Text and Border*/
.sm-user-ui .yui3-menu-children,
.sm-user-ui .yui3-menu-label {
    border-color: rgba(31,32,33, 0);
    border-radius:25px; 
    background-color: rgba(31,32,33, .80)
}

/*Hover Background Change*/
.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover {
    background: rgba(31,32,33, .1);
}

.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover {
    background: rgba(31,32,33, .40);
    border-color: rgba(31,32,33, 0);
    color: #e7e7e7;
}

Rocketman766

Thanks for the info, I will have to give it a shot and see if I can put my own spin on it. Thanks again. By the way, I like what you have done with your site... looks good!

Lance.