Sample code to make different menu bars

Copy and paste the following codes into your site to replace the standard designs

 

Floating width text menus This code is for a floating width text menus in the top bar Template code <div id="topmenuback"> <div class="menutopbox"> <!--Begin top menu section--> <a class="topmenutext<!--@Grouplive-->" title="T" href="<!--Tmenupage.value-->"> <!--Tmenuname.value--></a> <!--End top menu section--> </div><!-- topmenuback close --> stylecolor.css code /* Top menu text link styles*/ a.topmenutext:link, a.topmenutext:visited, a.topmenutext:active { border-left: 1px solid rgb(212,230,255); border-bottom: 1px solid rgb(212,230,255); border-right: 1px solid rgb(212,230,255); border-top: 1px solid rgb(212,230,255); padding: 0px 10px 6px 10px; background: rgb(255,255,255); color: rgb(128,128,255); text-decoration: none;} a.topmenutextlive:link, a.topmenutextlive:visited, a.topmenutextlive:active { border-left: 1px solid rgb(255,204,204); border-right: 1px solid rgb(255,204,204); border-top: 3px solid rgb(255,204,204); padding: 0px 10px 7px 10px; border-bottom: 0px solid rgb(255,255,255); background: rgb(255,255,255); color: rgb(85,85,221); text-decoration : none;} a.topmenutext:hover { border-left: 1px solid rgb(255,204,204); border-right: 1px solid rgb(255,204,204); border-top: 1px solid rgb(255,204,204); border-bottom: 1px solid rgb(255,255,255); background: rgb(255,255,255); padding: 0px 10px 6px 10px; color: rgb(255,102,102); text-decoration : underline;} stylelayout.css code #topmenuback { height: 24px; margin: 0px 0px 0px 152px; padding: 0px 0px 0px 0px; } .menutopbox { width: 100%; height: 100%; margin: 4px 5px 0px 20px; padding: 0px 0px 0px 0px; text-align: left; } styletext.css code a.topmenutext, a.topmenutextlive { font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 0.7em; font-weight: bold; font-variant: small-caps; text-align: center; height: 100%; margin: 0px 0px 0px 0px; }

Floating width rounded image top menu bar This code is for a floating width rounded image top menu bar Template code <div class="topmenuarea"> <div id="topmenuback"> <ul> <!--Begin top menu section--> <li> <a class="topmenutext" title="T" href="<!--Tmenupage.value-->"> <span><!--Tmenuname.value--></span></a> </li> <!--End top menu section--> </ul></div> </div><!-- topmenuback close --> stylecolor.css code #topmenuback a:link, #topmenuback a:visited { background: transparent url(images/buttonlft.gif) 0px 0px no-repeat; color: rgb(102, 102, 102); text-decoration : none; } #topmenuback a:active { background: transparent url(images/buttonlft.gif) 0px -30px no-repeat; color: rgb(68, 68, 68); text-decoration : none; } #topmenuback a:hover { background: transparent url(images/buttonlft.gif) 0px -57px no-repeat; color: rgb(255,0,0); text-decoration : underline; } #topmenuback a:link span, #topmenuback a:visited span { background: transparent url(images/buttonrght.gif) 100% 0px no-repeat; } #topmenuback a:active span { background: transparent url(images/buttonrght.gif) 100% -30px no-repeat; } #topmenuback a:hover span { background: transparent url(images/buttonrght.gif) 100% -57px no-repeat; } #topmenuback a span {float:none;} stylelayout.css code .topmenuarea { height: 32px; margin: 0px 0px 0px 160px; } #topmenuback { float:left; width:100%; font-size:93%; line-height:normal; margin-top: 6px; } #topmenuback ul { margin:0; list-style:none; padding-top: 7px; padding-right: 10px; padding-bottom: 0; padding-left: 0px; } #topmenuback li { display:inline; margin:0; padding:0; } #topmenuback a { float:left; margin:0; padding:0 0 0 4px; text-decoration:none; } #topmenuback a span { float:left; display:block; padding: 5px 15px 0px 6px; text-decoration: none; } #topmenuback a span {float:none;} styletext.css code a.topmenutext, a.topmenutextlive { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.75em; font-weight: bold; font-variant: small-caps; text-align: center; height: 100%; display: block; } ul.default { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.75em; }

Search button layout

 

Last Updated on 2011-06-13

Page number 1 of 2 | Next Page

Home | code samples | Top