A Program to Create Your Own Tab Menu Graphics

Hi Annie!
Wanted to tell you I found a free download of a software to create tabbed menus, which generates the code too. It's really neat. I used it to make all the tabs.


My friend, hillgrandmom, from Life on a Hill, sent me a link to CSS Tab Designer. So, I took a look at her blog. It made lovely little tabs. After you make your new tabs to match your blog, you can add them using this tutorial: A Tab Menu for Your Very Own. How exciting is that?

A Cool CSS Navigation Menu

Widgets For Blogger said...
Annie,
Do you have a post or could you make a post about how to make a menu like yours so that when you hover over an image you get an effect like yours?

Top row: static - Bottom row: active

I have been asked by a couple of people for this, so today I decided to do a little post. First, I want to give all the credit to this wonderful site, Web Designer Wall. I go to that site and get lost in all it's beauty. I just drool over all the cool design features. (Makes for a wet keyboard.) You can read their complete instructions on Advanced CSS Menu.

This is accomplished with a little bit of graphic making and code placing. First with the graphic making. The Web Designer Wall gave great instructions on making your graphics. So, instead of me going over it again, I would suggest reading it there.

That brings us to the code placing. This is a two part process.

1. You will want to place the code in the CSS style sheet. I am showing the the code I used to place the menu in BlogU. That way you can compare with WDW to see any differences, and what the differences do.

/*Roll over feed
-----------------------------------------------*/
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 50px;
background: #ffffff;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span{
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(home.png) no-repeat;
left: 10px;
top: 25px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(/home-over.png) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(about.png) no-repeat;
left: 180px;
top: 18px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(about-over.png) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(RSS.png) no-repeat;
left: 350px;
top: 24px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

The orange: change the values for your own images sizes.
The blue: change these values so it fits where you want it. This is simply trial and error...and patience.
The purple: this may have to be changed to fit in your sidebar, depending on the width of your sidebar, or if you put it below your header, that width.

Of course, the style sheet is where you do all of your...ummm...styling, so there may be other changes you want to make.

2. Now you will have to put some code in a widget. Choose HTML/Javascript (my most favorite widget) and put the following code in:

<ul id="menu">
<li><a href="YOUR BLOG URL" class="home">Home <span></span></a></li>
<li><a href="YOUR PROFILE URL" class="about">About <span></span></a></li>
<li><a href="YOUR FEED URL" class="rss">RSS <span></span></a></li>
</ul>

The orange: changes here are only to paste your own URL's in the appropriate spot.

Attention Classic Bloggers: Put the widget code in your template between <MainOrArchivePage> and </MainOrArchivePage>. Please note, I haven't actually tested it in Classic, but it looks like it will work fine. Let me know.

That will create the menu. It takes some skill with Photoshop or GIMP, but it is worth the effort!

A Tab Menu For Your Very Own

A few weeks ago I was asked by a web designer to help get a tab menu on a blog that was to be integrated with a web site. I have never worked with setting up a tabbed menu before, so I set off in quest of an answer. Happily I was able to piece together bits of code from here and there. This is the result:




I was able to use the instructions from Blogger and Free Templates but, I'll attempt to simplify their instructions here.

This is how you can get a tabbed menu on your blog. First, backup your template. Now open your Dashboard | Layout | Edit HTML. Locate the CSS style sheet between the <b:skin><![CDATA[/* and ]]></b:skin> tags and add the following code.

Note: It doesn't make any difference exactly where it goes, but a good place would be after the
/* Header
----------------------------------------------- */ section.

Here is the code:

/*credits : http://blogger-freetemplates.blogspot.com , HariesDesign.com*/
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("LEFT IMAGE") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("RIGHT IMAGE") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Save your template. Scroll down your template past the CSS style sheet and find:

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

Replace with this code:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your template. Open the Page Elements tab in your dashboard. Notice you now have the option to add a page element to your header section. Which also means you have the option to drag and drop the element where you would like your tabs to display...above or below the header. Click on Add a Page Element and put this code in the window, replacing my links with yours:

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Home</span>
</a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>3 Column</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>2 Column </span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Blogging Tips</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Seo Tips</span></a></li>
</ul>
</div>

That is it for the code end. Now all you need is the tab graphics. A little search revealed several, but my favorites came from explodingboy. Click to see them:

1. Tab Menu Set 1
   
2. Tab Menu Set 2

You can download them here: Tab Set 1 and Tab Set 2. You will need to upload your images to a web host such as Ripway and insert the image in the above code where it says IMAGE LEFT and IMAGE RIGHT. You will notice that each image in the zip file has a left and right.

Enjoy your new tab menu! I have used them for ages in Buttermilk Clouds, but can't take credit for adding them. They happily came with the template. But, you can take a peek and see some uses for the tabs. Buttermilk Clouds is a classic template, so the code is different for that style template. If there is enough interest, I may attempt a post on adding a tab menu to the Classic Blogger. Let me know.