By: Tahsin Hasan

Tahsin Hasan — Sat, 31 Jul 2010 08:02:36 +0000

Hello, see new boxy menu on tahSin's gaRAge. Thanks.

By: Deep

Deep — Sat, 26 Jun 2010 10:12:22 +0000

Hi,

Given article on Professional Dark CSS Menu is really important to the web designer, who can take the help from this tutorial.

Deep from Website Development Company : http://www.e-profitbooster.com

Our Services :

• Website Designing
• Web Development
• PHP Development
• ASP.NET Development
• E-Commerce Website
• Website Re-designing and Maintenance
• Banner Designing
• E-Learning
• Domain Services and Maintenance

By: James Flinn

James Flinn — Wed, 25 Nov 2009 16:15:06 +0000

I tried out the code you suggested Raymond and it worked great for the first sprite (home), but the others won’t switch. I’m not sure what I’m doing wrong, see code below. Sorry for being such a pain. I can zip up everything and email it to you if you’d like to see what I’m working on. I’d be interested in your take on what I’m doing. Again, thanks for all the help!

index.html

Home
Lodging
Shopping
Recreation
Dining
Sweets_and_Treats
Groceries
Arts

Antiques
Real_Estate
Services
Events
Gallery
Links
Contact_Us

menu.css
/*======= top menu =======*/
.container1 {
width:766px;
height:32px;
margin:0 auto;
}

.menuwrap1 {
width:100%;
height:32px;
position:relative;
background:transparent url(images/menu_bckgrnd.jpg) repeat-x;
}

ul#menu {
width:756px;
height:32px;
float: left;
margin:0;
padding:0;
padding-left: 10px;
list-style-type:none;
background:transparent url(images/menu_bckgrnd.jpg) repeat-x;
}

ul#menu li {
float:left;
}

ul#menu li a {
display: block;
height:32px;
overflow:hidden;
text-indent:-99999px;
background:transparent url(images/menu_top_matrix.jpg) no-repeat;
}

ul#menu li#home a { background-position:0 0; width:71px; }
ul#menu li#home a:hover { background-position:0 -32px; width:71px; }
ul#menu li#home a.current { background-position:0 -32px; width:71px; }

ul#menu li#lodging a { background-position:-71px 0; width:84px; }
ul#menu li#lodging a:hover { background-position:-71px -32px; width:84px; }
ul#menu li#lodging a:current { background-position:-71px -32px; width:84px; }

ul#menu li#shopping a { background-position:-155px 0; width:92px; }
ul#menu li#shopping a:hover { background-position:-155px -32px; width:92px; }
ul#menu li#shopping a:current { background-position:-155px -32px; width:92px; }

ul#menu li#recreation a { background-position:-247px 0; width:102px; }
ul#menu li#recreation a:hover { background-position:-247px -32px; width:102px; }
ul#menu li#recreation a:current { background-position:-247px -32px; width:102px; }

ul#menu li#dining a { background-position:-349px 0; width:73px; }
ul#menu li#dining a:hover { background-position:-349px -32px; width:73px; }
ul#menu li#dining a:current { background-position:-349px -32px; width:73px; }

ul#menu li#sweets a { background-position:-422px 0; width:140px; }
ul#menu li#sweets a:hover { background-position:-422px -32px; width:140px; }
ul#menu li#sweets a:current { background-position:-422px -32px; width:140px; }

ul#menu li#groceries a { background-position:-562px 0; width:95px; }
ul#menu li#groceries a:hover { background-position:-562px -32px; width:95px; }
ul#menu li#groceries a:current { background-position:-562px -32px; width:95px; }

ul#menu li#arts a { background-position:-657px 0; width:87px; }
ul#menu li#arts a:hover { background-position:-657px -32px; width:87px; }
ul#menu li#arts a:current { background-position:-657px -32px; width:87px; }

/*======= bottom menu =======*/
.container2 {
width:766px;
height:32px;
margin:0 auto;
}

.menuwrap2 {
width:100%;
height:32px;
position:relative;
background:transparent url(images/menu_bckgrnd.jpg) repeat-x;
}

ul#menu2 {
width:686px;
height:32px;
float: left;
margin:0;
padding:0;
padding-left: 80px;
list-style-type:none;
background:transparent url(images/menu_bckgrnd.jpg) repeat-x;
}

ul#menu2 li {
float:left;
}

ul#menu2 li a {
display: block;
height:32px;
overflow:hidden;
text-indent:-99999px;
background:transparent url(images/menu_bottom_matrix.jpg) no-repeat;
}

ul#menu2 li#antiques a { background-position:0 0; width:89px; }
ul#menu2 li#antiques a:hover { background-position:0 -32px; width:89px; }
ul#menu2 li#antiques a:current { background-position:0 -32px; width:89px; }

ul#menu2 li#realestate a { background-position:-89px 0; width:105px; }
ul#menu2 li#realestate a:hover { background-position:-89px -32px; width:105px; }
ul#menu2 li#realestate a:current { background-position:-89px -32px; width:105px; }

ul#menu2 li#services a { background-position:-194px 0; width:88px; }
ul#menu2 li#services a:hover { background-position:-194px -32px; width:88px; }
ul#menu2 li#services a:current { background-position:-194px -32px; width:88px; }

ul#menu2 li#events a { background-position:-282px 0; width:75px; }
ul#menu2 li#events a:hover { background-position:-282px -32px; width:75px; }
ul#menu2 li#events a:current { background-position:-282px -32px; width:75px; }

ul#menu2 li#gallery a { background-position:-357px 0; width:79px; }
ul#menu2 li#gallery a:hover { background-position:-357px -32px; width:79px; }
ul#menu2 li#gallery a:current { background-position:-357px -32px; width:79px; }

ul#menu2 li#links a { background-position:-436px 0; width:66px; }
ul#menu2 li#links a:hover { background-position:-436px -32px; width:66px; }
ul#menu2 li#links a:current { background-position:-436px -32px; width:66px; }

ul#menu2 li#contact a { background-position:-502px 0; width:102px; }
ul#menu2 li#contact a:hover { background-position:-502px -32px; width:102px; }
ul#menu2 li#contact a:current { background-position:-502px -32px; width:102px; }

By: Raymond Selda

Raymond Selda — Wed, 25 Nov 2009 01:58:09 +0000

Sure! This can be a little tricky because the menu uses background positioning for the sprites but I know you can pull it off.

Here’s what you do. For eg. if you want to highlight the About menu if you’re currently on the about page.

Step 1: Copy the code that makes the hover action work for the About but this time you’re going to target an anchor tag that has a class=”current”. Same CSS but different target.
ul#menu li#about a.current { background-position:-346px -59px; width:84px; }

Step 2: You then append class=”current” inside the anchor tag that you’re currently in which is in our case the About section.
class="current"

Step 3: Refresh and you’re About menu will be highlighted.

Hope this helps. Good luck.

By: James Flinn

James Flinn — Tue, 24 Nov 2009 18:06:55 +0000

Well I tried your suggestion the best I could and couldn’t get it to work correctly. I have to admit that my coding skills aren’t the best. Can you post what and where things would go? I really like how slick this is! Thank you in advance!

By: Raymond Selda

Raymond Selda — Tue, 24 Nov 2009 02:12:35 +0000

You can append a class (eg. class=”current-page”) that will display the sprite when you are in the page selected. Hope this helps.

By: James Flinn

James Flinn — Mon, 23 Nov 2009 17:52:56 +0000

Fantastic idea and nice code. I have a question though, what if you want to keep the sprite area that you select to stay on when going to the page selected? What needs to change in the code to handle that?

By: Mich

Mich — Sat, 14 Nov 2009 19:10:39 +0000

Thanks a lot for that – finally a good hint

By: Ann

Ann — Tue, 27 Oct 2009 22:12:43 +0000

Awesome tutorial…thanks!

By: jay

jay — Sun, 25 Oct 2009 23:31:56 +0000

can you show me how to integrate a dropdown menu to one of the menu items. thanks in advance

Comments on: Professional Dark CSS Menu

By: Tahsin Hasan

By: Deep

By: James Flinn

By: Raymond Selda

By: James Flinn

By: Raymond Selda

By: James Flinn

By: Mich

By: Ann

By: jay