CSS Menus - Dolphin

Pre-built in blue. Our most popular menu.

This menu is called “Dolphin” because it’s blue… not very creative, I know.

The Menu

Customization

You can get the original Photoshop file as part of the 13Styles.com Photoshop Pack.

FAQ

Entire menu system is less than 6KB.
5 image files, 1 css file, 1 html file.
Has been tested and works in over 150 broswer/operating system combos.
It’s FREE for you to use.

Source Code

Check out the source code below or download the zip file containing all necessary html, css, and images. The “About Us” tab has the ON state by adding the “current” class to the A tag.

CSS

<style type="text/css">
<!–
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(/code/dolphin/images/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(/code/dolphin/images/dolphin_bg-OVER.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(/code/dolphin/images/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(/code/dolphin/images/dolphin_right-ON.gif) no-repeat top right;height:33px;}
–>
</style>

HTML

<div id="dolphincontainer">
	<div id="dolphinnav">
		<ul>
			<li><a href="http://www.13styles.com" title="css menus"><span>Home</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus" class="current"><span>About Us</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>Services</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>Our Work</span></a></li>
			<li><a href="http://www.13styles.com" title="css menus"><span>Contact Us</span></a></li>
		</ul>
	</div>
</div>

This entry is filed under CSS Menus. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

21 Responses to “Dolphin”

Sebastian Says:
January 19th, 2008 at 4:54 pm
Hello,

I am complete begginer in web designing. I came accross your site. This menus are really great.It is not suprising for you probably that i would like to implement one to my website.

I have one difficulty. Once I copy all the codes and files it is not showing me the horisontal menu - rather some disorganised table. I tried to create a one row table with options as columns, but it does not look as nice as an example. Could you give some tip for rookie how to make it right?

Thanks in advance for help.

Cheers
toddynho Says:
January 20th, 2008 at 1:41 pm
Hi Sebastian,

If you download the zip file (http://www.13styles.com/code/dolphin/dolphin.zip) and extract this you’ll see the menu working properly. I’m not sure it’s going to work very well with tables mixed in.
Rory Says:
February 2nd, 2008 at 11:59 am
Hello, i have used this on my website and his worked thine.

I was wondering if there was a way to add drop-down menus to it?

Thanks.
toddynho Says:
February 6th, 2008 at 2:49 pm
Hi Rory, there is an example here where they have added drop-down menus to it: http://www.javascriptkit.com/script/script2/tabset/index.shtml
Shan Says:
February 12th, 2008 at 10:18 pm
Great looking menu. I am trying to add another layer of similar buttons once a menu is
selected. For instance when you select About Us below it new buttons will appear
horizontally across. I am pretty new with css and was wondering if you had an example
of something like this.
Thanks,
admin Says:
February 13th, 2008 at 7:30 pm
Hi Shan, check out the link in the comment above yours.
John Says:
February 17th, 2008 at 8:37 pm
Hi
Thanks for the great script.

I am having one problem, however. When I open the webpage in IE7, everything is great. However, when it is open using Firefox browser, I lose the submenu, and the color doesn’t change in the top menu when going from link to link. Is there anything I could change in the script to remedy this problem?

THANKS
toddynho Says:
February 17th, 2008 at 8:59 pm
Hi John, no problem. Can you post your example online so that I can check it out? The sub-menu stuff was provided by a different site, so I can’t vouch for it, but if you send me a link I will certainly try to help out…

Either post it here or email it to me info@13styles.com
Kitesource.ca Says:
February 19th, 2008 at 2:16 am
I think I know what John is referring to…
The class=”current” setting doesn’t automagically change based on what link is selected.
Am I correct in assuming that this functionality is not dynamic, but meant to be hard coded ona per page basis?

Thanks for the menu!!
Jeff
toddynho Says:
February 19th, 2008 at 2:07 pm
Yeah, it’s expected that you use some kind of server-side technology to assign the “current” tab.

I’ll post a php example on here…
bill Says:
February 22nd, 2008 at 4:20 pm
I am planning to use this grear menu in my site very soon…
dazzafakt Says:
February 28th, 2008 at 5:36 pm
http://www.tabcreatr.com - A tool to create online Css Menus and publish them.
Denver Web Design Says:
March 16th, 2008 at 6:57 pm
Love this menu system. Modded it to use on our own site. Had to use a lot of PHP to make it dyanmic, but it’s a great base! Thanks!
ace Says:
March 29th, 2008 at 1:50 am
Hi !

amazing menu system, I bet this would intrigue you: http://www.sgclark.com/sandbox/minislide/

if the slide effect can be merged with this menu, it would be Super amazing !

let me know if this can be done as I am very interested in knowing
please email me back
Ed Says:
April 3rd, 2008 at 4:42 am
Excellent (and beautiful) menu. Two questions though.

(1) How can I use 2 or more words in a tab? Tabs stretch with long words easily, but with more than one word, instead of stretching to accommodate new words, the words are “pushed down” into a new line. What part of the CSS is causing that?

(2) Persistent tabs: If I am in the “About Us” page, and then glide my mouse over other links on the menu (but not click on any link) the tab remains on the last link I moused over. Is it possible to automatically make the tab revert to that of the current section once the mouse pointer leaves the menu?

Please ignore these questions if they are beyond the scope of these free menus.

Once more, thanks for sharing.
bobby Says:
April 6th, 2008 at 9:37 pm
iCwZ0X Hi! Nice site! Where is a add to favorite button&
http://www.mysite.com
pedro Says:
April 8th, 2008 at 3:27 pm
Hello, i´m testing the menu and it works fine! Now i´m trying to center the buttons but
i can´t. Can you help me? Thanks.

In mozilla i wrote this and works, but not in ie6 and ie7.

/*the same as dolphinnav to fill left and right around
original dolphinnav*/

Home
car rates

Luxury

Malaga
f.a.q
Internet Rozprza Says:
April 9th, 2008 at 6:15 pm
Look simple and clean. Great Job!
Simplycase Says:
April 9th, 2008 at 6:16 pm
Excellent and beautiful menu.
Hitech Dolphin Says:
April 30th, 2008 at 11:24 am
Thanks for a great menu. The name dolphin really deserves it - for it’s colors and for it’s smooth operation.
9sert.com » Blog Archive » เมนู CSS สวยๆ น่าใช้ครับ Says:
May 6th, 2008 at 7:18 am
[…] ดูตัวอย่าง ดาวโหลด Trackback url | Rss 2.0 […]

13Styles.com CSS Menus

13styles is all about css menus. The menus are list based, very light-weight, easy to implement, and cross-browser compliant. Some of the css menus are free and some require you to purchase rights to use them.

About | Advertise