Complete Entry

Free CSS Navigation Menu Designs

December 15, 2005

289 Comments

  • Posted at: 9:50 am
  • Filed in: Design

Tags:

These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit. You may want to clean up the stylesheet, or alter the menu graphics to suit your needs. All the menus can be used for commercial or private use.

See all the menus.
Download the entire menu set.

Comments

  1. Very nice mate :)

    Keep it up :D

  2. [...] Based on the sliding doors method. [...]

  3. Very very nice, and even nicer examples. I’ve seen similar methods, but this takes it one step further :)

  4. awesome CSS navigation menus. thanks a lot

  5. Thanks,mamma mia!!

  6. Nice work! Thanks for shareing.

  7. You should add :focus to the :hover links.
    Other then that I have no complaints, good effort.

  8. [...] Primjeri uporabe ove tehnike: http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/ [...]

  9. merry christmas to all. thx brody.

  10. These are awesome and look really great. I’ve been trying to pull off the same thing on a project I’ve been working on and I couldn’t get them to look the way I wanted them to.

    Any tips for getting them to work in Mac IE 5.2?

  11. SWEET! Thank you so much! :)

  12. Nice set of navigation styles.

  13. Dave: Sorry, I’m not quite sure what problems you are having with Mac IE 5.2. It might not be imperative since most Mac users have adopted Safari, but you might want to look at the two Sliding Doors articles for answers.

  14. Nice work! Thanks.

  15. Great Job mate, these look awesome.

  16. Hochwertige Menüleisten zum Mitnehmen

    «ExplodingBoy» Christopher Ware bietet 15 sehr schöne CSS-basierte Navigationsleisten zum kostenlosen Download an. Alle Leisten sind auch in einem Set verfügbar….

  17. Thanks!!! :)

  18. Modified and implemented. Thx a lot for sharing!

  19. [...] Bei Exploding Boy gibt es eine Auswahl schner Tab-Navigationen. Diese CSS-Menlisten nutzen die Sliding Doors Technik. Die Beispiele sind frei zum Download und an die eigenen Bedrfnisse anpassbar. [...]

  20. Thanks a lot for sharing this. I hope to use it with my students, they are students in education and this would be fine for webquests and on-line porfolios.

  21. [...] [...]

  22. Thank you very much!
    By the way: your menus do work in IE Mac 5.2(.3 on OS X.3).

  23. Menús de navegación con tabs

    Christopher de ExplodingBoy ha creado y liberado para su cualquier uso, un menú de navegación con lindas tabs y usando CSS (obvio )

    I like!, intentaré usarlas en este diseño, que me he quedado sin menú!, para usarlas sólo descargar el set o …

  24. nice!… fantastic work Thank you very much!!

  25. Great work! Thnx for sharing this.

  26. [...] [...]

  27. You rock!!

  28. Liked the menus….will surely use one of them in my next site…

  29. Thanks for sharing this.

  30. these are cool!
    these will go at the top of my tool box

  31. Like the tabs?

    Thanks to “quick links to good stuff”, I found some free CSS Navigation menu designs. I modified the colors to match my color scheme. I still think it needs some polish, but it will do for now. What do you…

  32. [...] Su exploding-boy.com sono disponibili 11 tabbed menu costruiti con la tecnica Sliding Doors di A List Apart. [...]

  33. really great work, really helpful. thx

  34. Nice Collection. Thank you for your work.

  35. 11 Tab-Menüs mit Sliding Doors Technik als Pakte zum Download

    Christopher Ware hat eine Sammlung von 11 CSS-Menüs in einem Paket zum kostenfreien Download zusammengestellt, die mit der Sliding Door Technik arbeiten. Hochwertige Menüleisten zum Mitnehmen, meint dazu Manuele Hoffmann (CSS-Hilfe). Nette Inspiratio…

  36. nice work.. thanks for sharing =)

  37. Great Menus!

    I added an ‘active’ tab so the user can more easily tell which page they are on.

    On the link tag in your list add id=”activetab” to make that pages tab active…. easy to do if you have server-side language so you can pull querystring values out.

    So….

    And then in the CSS add the following (this is for menu C) ::

    #tabsC a:hover span, #tabsC a#activetab span
    { background-position:100% -42px;color: #FFF; }
    #tabsC a:link#activetab, #tabsC a:visited#activetab, #tabsC a:hover
    { background-position: 0% -42px; }

    Nothing special, just a slight tweak for easier navigation.

    Happy Holidays!

  38. Nice tools.
    It was needed to me.
    Thanks.

  39. Veramente belli e utili. Si continua sempre a imparare. Ciao

  40. [...] Eccovi due ottimi link dove potrete trovare menu orizzontali e verticali in css. Il primo di Christopher Ware è Free CSS navigation designs, il quale offre ben undici menu orizzontali a tab molto belli. Per i menu verticali, altrettanto interessanti i diversi esempi di Ian Main in Free Menu Designs. [...]

  41. [...] Wer es noch nicht kennen sollte: CSS Menüs zum download. Ich mag zwar diese Reiternavigationen nicht, aber zum lernen ideal. [...]

  42. bradley d: Good tip for anyone wanting to add an active tab.

  43. Thanks a lot for this. I downloaded all tutorials about this kind of navigation but I couldn’t make it work in IE without some bottom pading of 1px. These tabs actually work. Great!

  44. Well done. I think #12 will go really nice with my color scheme.

  45. Need a little more variety with that bucket? Check it:
    http://exploding-boy.com/images/cssmenus2/menus.html#

  46. I don’t know what I’m doing wrong, but all I get are image files with no CSS to alter or even look at!

    Help??!

  47. Thanks a lot. Really useful.

  48. thank you for this. Here’s the “But”: i thought the “sliding doors” technique was supposed to create fully scalable menus … so … these are not scalable.

  49. Most excellent! Thank you very very much. now I can finally update the old K2-menu to something more professional.

    Happy holidays!

  50. kloevekorn: These are examples of the sliding door technique. You can easily modify the images to be as large as you would like and therefore be more scalable.

    Lon Phillips : Lon, The CSS is in the html document. You simply alter your prefered menu in that file.

  51. [...] Really Cool CSS Navigation Menus By Rob I have to play with this: Exploding Boy provides links to some cool navigation menu designs. [...]

  52. Thanks! Suffered another stupid moment!

  53. [...] Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens. (tags: css design helpful reference) [...]

  54. VERY nice – just considering adding some neat Microsoft Style Filters to them during the mouseovers… eg. alpha, gray, transitions etc…

    Thanx :)

  55. nice

  56. i am new in webdesigning i want to know how to create logos for my website like the logo of this website it really cool in what program you had created it ? and what program i need to use or any web where from i can start ? please help me

  57. Awesome!

  58. Wow, this is great! I always want to put together great freebies like this, but never seem to find the time. Thanks for finding the time, these are very handy. :)

  59. [...] [...]

  60. Thanx, very nice. I’ll have to give a copy to my SO. She needs some better menu options then the ones that Dreamweaver will create for her.

    And yes, IE sucks, but when one is at work and denied anything else, you use what is on the computer.

    Actually one of the main reasons I think it is taking so long for other browsers to get a larger chunk of the reported marketshare is that so many of us have no choice about what we use while at work.

  61. [...] After receiving several email requests from visitors asking for vertical menus I decided to create 14 free vertical menu designs. You may download the entire set and use any way you see fit. Like the last two sets of menus these can be used for commercial or private use. Have fun with all the menus. [...]

  62. [...] the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer[...]

  63. Great contributions! I am using one of these in my next site, but I cannot get the tabs to line up vertically!

    I have a header div, inside this is my tab bar. If I put a “border: solid 1px red;” around the tabs, the box floats about 20px above the actual tabs.

    This happens in IE and firefox… any ideas what I’m doing wrong?

  64. [...] Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens.: Free CSS Navigation Menu Designs created using the Sliding Doors technique Keywords: css [...]

  65. Very cute little message at the top of your site about how my browser sucks….yes…I’m surfing right now in IE when I just happened to stumble across your site. I’m usually in FireFox. I know IE has flaws, but as a web professional I have to use and design for ALL browsers because I can’t depend on all my customers/audience (WHO PAY MY BILLS) to be as enlightened and incredibly web savvy as you….you arrogant little wanker. I’m so sick of web designer’s sites and their bitching and whining about how terrible this browser or that browser is. Do you ever hear a magazine design bitch about how terrible certain types of paper are?

    Maybe if you were a true web design professional you would be able to work within the current constraints of the medium and design a web site that is truly accessible to the widest array of users possible (especially those who use the most popular browser on the internet at the time of this writing).

    Grow up.

  66. Yes. I know that type: “I just happend at the moment to use Explorer”.

    Grow up.

  67. [...] Today my site got the absolute best comment I’ve read in a while from someone known as “Bitchy Designer”. Very cute little message at the top of your site about how my browser sucks….yes…I’m surfing right now in IE when I just happened to stumble across your site. I’m usually in FireFox. I know IE has flaws, but as a web professional I have to use and design for ALL browsers because I can’t depend on all my customers/audience (WHO PAY MY BILLS) to be as enlightened and incredibly web savvy as you….you arrogant little wanker. I’m so sick of web designer’s sites and their bitching and whining about how terrible this browser or that browser is. Do you ever hear a magazine design bitch about how terrible certain types of paper are?Maybe if you were a true web design professional you would be able to work within the current constraints of the medium and design a web site that is truly accessible to the widest array of users possible (especially those who use the most popular browser on the internet at the time of this writing).Grow up. [...]

  68. [...] Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens. [...]

  69. [...] Christopher Ware of ExplodingBoy has designed some very nice and classy CSS navigation menus for anyone to use free of charge. He has done a great job of putting these together and he has had a great response thus far from the community. If your new to CSS and XHTML these would also be a great way to learn how to make your own or even edit these as you see fit. He has done 3 different sets thus far in horizontal and vertical flavors and can be found here, here, and here. I’ve got them all downloaded and stashed away myself for later use. Thanks Christopher. [...]

  70. Do you ever hear a magazine design bitch about how terrible certain types of paper are?”

    No, they simply choose not to use that type of paper. And they likely tell their peers not to use it as well.

    That said, If IE was paper, I wouldn’t even wipe my rear end with it.

  71. [...] After numerous (who knew there were so many die-hard IE fans?) emails from people ranting and raving about a small banner that has been on my site for well over 3 months I decided to make the necessary changes to assure my site now displays correctly in Internet Explorer. I hope the 5% of IE users, and Bitchy Designers that visit the site are now content. [...]

  72. [...] Auf exploding-boy.com gibt es 11 horizontale Menüs zum ansehen und herunterladen. Die Designs können frei verwendet und verändert werden: All the menus can be used for commercial or private use. [...]

  73. [...] I stumbled across this article a couple of days ago. I personally didn’t like the first set of menus, but the second set I absolutely loved. I plan on making another page today or tomorrow, which will have some menus I have made, well that and alot of other stuff. [...]

  74. I’ve made tabbed navigation similar to yours, but I don’t know how to make it so that the selected tab looks different than the others. I thought that a:active would do the trick, but it seems to only occur when you are holding down the mouse to select an item. The second you let go, the item that you selected looks just like the others. Do you have any suggestions?

  75. pdid: To have an active link stay in an “active” state you have to tell the page which link is actually active at that time. See the comment here for an idea of what I mean.

  76. LOL @ Bitchy Designer =)

  77. First of all: Thanks for some lovely CSS menus.

    I’ve got a question for the active tab as well. I’ve tried to do exactly as bradley d explained, but for some reason it just doesn’t seem to work.

    Here’s the HTML with the class added to the first link:

    Link 1
    Link 2
    Link 3
    Longer Link Text
    Link 5

    Link 6
    Link 7

    I then added bradley’s CSS part to the style sheet. Just added it, didn’t change anything to the existing style sheet. But nothing happens. It’s not working. What am I missing?

    I know it’s not your code, but maybe you can shed some light over this?

  78. Thank You!!..
    I am currently using the “h” menu.. I am no webmaster, this is a learning experience . But it does feel rewarding. BTW, how do i center it though??

  79. OutStandin Work Buddy ,Much Appreciated.

    Thankz

  80. [...] Segnaliamo alcune risorse online da cui scaricare, modificare o semplicemente ispirarsi per ottenere dei menù di navigazione. Per cominciare ecco un articolo di Exploding boy che mette a libera disposizione 11 bei menù orizzontali (pagina con esempi). Exploding Boy ci offre anche 14 menù verticali (pagina con esempi). [...]

  81. [...] 再搭配下面這段CSS，就能做出漂亮的選單了： #mainmenu ul {margin:0; padding:20px; list-style:none;} #mainmenu li {display:inline; margin:0; padding:0;} #mainmenu ul li a { background: url(圖片網址) no-repeat top left; padding:13px 13px 4px 13px; } #mainmenu ul li a:hover { background: url(圖片網址) no-repeat bottom left; } 延伸學習：Free CSS Navigation Menu Designs [...]

  82. Like marco above, I had problems in IE (with the image flickering when hovering) and had to add a padding-bottom: 1px; to the #tabs ul {} rule .

    Rather than being abusive to the creator of this great piece of work I thought I’d offer a practical solution for those who have to code for IE.

    Keep up the great work!

    Best Wishes,

    Paulie

  83. Duh? In fact that still doesn’t quite work! Anyone know how I prevent the image flickering when hovering in IE.

    http://w2web43.w2web.net/herbalhaven/

  84. Paulie: I’m not seeing any flickering in IE for the link you provided. Did you already fix your problem?

    snuf: I’m not sure why you aren’t having any luck. If you created an “active” class, and then added that class to the link in your HTML that you want to display as active it should work.

  85. Thanks for the great menus! One question: On firefox 1.5 I get a horizontal scroll bar on the browser when viewing the menus. I’m sure it has something to do with width:100%; but of course I do want the menu to go all the way across the page, but I would like to get rid of the horizontal scrollbar.

  86. I’ve worked out what the problem is!

    It’s the cache (temporary Internet files) – I had it set to “Every visit to page” and the minimum amount of disk space to use.

    I do this when working so that I can see any changes to the page I’ve made immediately and don’t have to manually clear the cache after each change.

    Thanks to those who left feedback for me, much appreciated folks!

  87. [...] I wasn’t even aware of this until today, but a company called OverZone Software offers a program called CSS Tab Designer which helps the user design CSS-based lists and tabs visually and without any programming knowledge required. The program information on the website says it offers 60+ different designs/colors. I must say judging by the two screenshots on the site they are attractive, and very familiar looking. Do not get me wrong. I’m not writing this entry to rant or rave. I’m actually glad they used the menu examples I created, and thought I would share the site with any readers that may have found my examples too diffcult to edit.

  88. This is truly amazing!!! I made use of one of your menus in my blog and it looks wonderful. Thanks a lot!

  89. [...] I’ve added some pretty menu tabs to my web pages too. Those are found in Exploding Boy. They are really pretty … To match the tabs, I’ve changed my PP’s color to pink too. Not a lot of pink, it’s just grey background. Some titles will be pink, that’s all. [...]

  90. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  91. Excellent Work!
    Congratulations…

  92. I love these samples. It takes so much time for a perfectionist like me to come up with orginal designs, using these tabs for sites I design will be extremely helpful.

    Regards,

    Steve

  93. First of all: Great work! Thanks for sharing with us.

    I do have the same problem like snuf in 54. My active tabs don’t work like they should. I did it like bradley d (27) explained.

    My link tag looks like this: link rel=”stylesheet” type=”text/css” media=”screen,projection” href=”…” id=”activetab”

    And I just added the css-code from bradley and changed my tabsC in my menu!

    what am I doing wrong?

  94. [...] 11 CSS navigation menus : at Exploding Boy [...]

  95. [...] With the most recent design of this site I decided to do away with a few of my google ad blocks to make the site a little nicer looking. My google ads are now only displayed to those that end up here via search engines. This is really easy to do, and kinda nice if you don’t want to bombard your common visitors with ads. Below is the simple PHP used to selectively display the ads: < ? if (preg_match(‘/^http://(w+.)?(google|MSN|yahoo|AOL)./’, $_SERVER['HTTP_REFERER']) == 1) { ?> < —Insert your Adsense Code Here—> < ? } ?> You can see this code in action by visiting a regular post on this site and then one from google. [...]

  96. Nice work, very usefull.. thnx for your work

    Regards

  97. I cant get them to work with putting the css code in an external style sheet? I would just keep them in the header of the page but then they won’t nest in a wrapping div that I have. Any help would be greatly appreciated.

    Thanks!

  98. Tate: Can you provide me with a link to look at to see the problem??

  99. Christopher,

    Thanks for getting back to me so soon. The link is below. I managed to get it nested into my wrap div but I still couldnt make it work when it was in an external css.

    http://www.moorelucaswedding.com/

  100. Great menus, thanks. Easy to implement and very useful. One question, how can I get the CSS menu to center on the page?

  101. Tate: I’m not sure why you are having trouble with the styles when they are located in the external stylesheet only. I can’t seem to recreate your error.

    David: In order to center the menus you will need to alter some of the styles. See here for my example.

  102. Fantastic, thanks for all your help Chris. :)

  103. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  104. [...] You’ll also find a set of free horizontal CSS menus by ExplodingBoy here and another set here. [...]

  105. Fantastic Work…thanks.

  106. [...] 11 CSS navigation menus : at Exploding Boy [...]

  107. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  108. i love u!!!!

  109. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  110. Fentastic work,great menus.

  111. Thanks for the menus.

    Regards.

  112. Thank for making this valuable information available to the public..

  113. Is there a way to dynamically switch the active tab? I need to setup some tabs and allow switching back and forth between various tabs without going back to the server. Is that possible with sliding doors?

  114. Just figured out how to do it.

    You change from the “activeTab” from an id selector to a class selector, and then change the classname from the currently active tab div to the one that the user has just selected.

    Works nicely.

  115. wow, good A+ to u !

  116. [...] Olen ottamassa blogissani käyttöön exploding boyn näppäriin ja nätteihin valikoihin perustuvaa sivulistausta. Ongelmaksi oli muodostumassa se, että valikot vaatii toimiakseen <span&st;-tagin listauksen sisään, ja wp:n wp_list_pages()-funktio ei tätä vakiona tee. [...]

  117. Thanks

  118. wow! awesome…….

  119. Tahank you very much to share your work. It’s impressive!!!!

  120. [...] 11 CSS navigation menus : at Exploding Boy [...]

  121. I must agree, this is excellent work and helpful to all of us, thank you for providing it!
    Mark

  122. I run into this through CodeProject newsgroup. I could not say how nice they are.Thank you for providing them.Very good job!

  123. [...] 11 CSS navigation menus : at Exploding Boy [...]

  124. Great!

  125. [...] from exploding-boy.com [...]

  126. Good work!

  127. These are great menus! I recently implemented them in my 10 year old site and they work GREAT except in IE 7. I can’t tell you how upset I am with Microsoft, but that should be a whole other blog post…

    Has anyone had any luck with getting the menu code to work properly in IE 7?

    I am currently just seeing the unordered list as opposed to the list with the styles applied. It looks terrible in IE 7 and great in everything else.

    you can check it out at http://new.selekta.com

    Anyone have any ideas? I am ready to launch the new site, but need to wait until I get a fix in place for this, or create a new menu.

  128. Great tabbed Menus. Really helpful

  129. In IE 6, when you hover over and out on a tab, the loading symbol shows for an instant… every time. (Almost like a flicker.. is this the same as the infamous IE flicker problem?) I tried the extra padding and the temp files settings from the comments above, but neither fixed it.

    Any suggestions? Thanks.

  130. [...] 11 CSS navigation menus : at Exploding Boy [...]

  131. [...] 11 CSS navigation menus : at Exploding Boy [...]

  132. [...] 11 CSS navigation menus : at Exploding Boy [...]

  133. [...]  http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/ [...]

  134. Wow, thank you very much. You have no idea how long I’ve spent searching for this. Thanks.

  135. I have seen this solution sliding doors menus earlier also, and I quite like the idea… very easy to implement and understand… thanks for providing these codes…

  136. Your download links are not working for these menus, nor are they working for the vertical menus.

    Cheers,
    MD

  137. motherduce : I’m not having any trouble with either of the download links. I’m not sure what may be/have been the problem. You might just want to try again.

  138. very good, thank

  139. Thank you. You saved much work to me.

  140. [...] 11 CSS navigation menus : at Exploding Boy [...]

  141. great work, simply nice

  142. [...] 11 CSS navigation menus : at Exploding Boy [...]

  143. thanks – man! – the navigation ist a problem in blogs and i still try to change ist…we`ll see the results hopefully soon!

  144. [...] 11 CSS navigation menus : at Exploding Boy [...]

  145. I like the I – thanks!

  146. Inferno! luogo grande per sicuro!

  147. great..thanks a lot

  148. [...] 11 CSS navigation menus : at Exploding Boy [...]

  149. [...] 11 CSS navigation menus Exploding Boy [...]

  150. [...] 11 css yönlendirme menüsü [...]

  151. [...] find excellent resources on making CSS Navigation menus hereCSS Tutorials on Navigation menus CSS Menu help High quality CSS [...]

  152. [...] 11 Free Sliding Doors CSS Menus by Exploding-Boy.com [...]

  153. [...] 11 CSS navigation menus : at Exploding Boy [...]

  154. [...] Free CSS Navigation Menu Designs at ExplodingBoy [...]

  155. [...] 11 CSS navigation menus : at Exploding Boy [...]

  156. [...] Free CSS navigation designs [...]

  157. [...] Cascading Style Sheets, sind eine einfache Sache. Als Anfänger, ist man von der Mächtigkeit, von CSS begeistert. Obwohl mit CSS, komplexe Anwendungen realisiert werden können, ist die Sprache, leicht verständlich. Wie HTML ist, ist CSS eine Beschreibungssprache. CSS Dateien schreiben, ist wie ein Aufsatz schreiben. Der Gestaltung von Menüs auf Basis von Listen und das Layouten mit Boxen, gehören zu anspruchsvollsten Aufgaben. Zahlreiche CSS Frameworks, unterstützen den Webworker, bei Layouten. Auf exploding-boy.com der Website von Christopher Ware, stehen zahlreiche CSS Menüs zum kostenlosen Download bereit. Besonders hervorzuheben sind, die Slidingdoors Menüs. Slidingdoors Menü, sind in der Gestaltung aufwendiger als ein Layout, und brauchen dementsprechend mehr Zeit. Darum sollte man unbedingt zugreifen, diese Menüs, gehören bei jedem Webdesigner, in der Werkzeugkiste. Slidingdoors Menü» Navigation» [...]

  158. [...] Free CSS Navigation Menu Designs: Descarga unos excelentes menús en CSS basados en la técnica Sliding Doors de A List Apart. [...]

  159. [...] 11 CSS navigation menus [...]

  160. [...] collection of CSS menus. http://www.xtreeme.com/dhtml/ – A tool that will help you create your own menus. http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/ http://www.alvit.de/web-dev/tabs-and-pure-css-navigation-menus.html [...]

  161. [...] http://www.exploding-boy.com [...]

  162. [...] explodingboy.com findet man wirklich sehr schön gestaltete css Navigationen zum freien Download vor. Minimal, aber [...]

  163. [...] CSS Menus Quite a List…. Articles / Tutorials on lists, menus, navigations and tabs. 11 CSS navigation menus : at Exploding [...]

  164. [...] 11 CSS navigation menus created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer.Lanuch Demo/site [...]

  165. [...] 11 CSS navigation menus [...]

  166. [...] The other is great for creating fast css navigation menus [...]

  167. [...] http://www.exploding-boy.com/2005/12/15/free-css-navigation-designs/ [...]

  168. [...] explodingBoy – 11 free downloadable examples, very nice [...]

  169. [...] Free CSS Navigation menus – These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit [...]

  170. [...] Free CSS Navigation Menu Designs [...]

  171. [...] Apart: Articles: Sliding Doors of CSS google reveals several variations and some prebuilt menus eg Free CSS Navigation Menu Designs at ExplodingBoy Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style has some [...]

  172. [...] Exploding Boy [...]

  173. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  174. [...] 11 CSS navigation menus : at Exploding Boy [...]

  175. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  176. [...] graphics to suit your needs. All the menus can be used for commercial or private use. ” from exploding-boy.com (No Ratings Yet)  Loading [...]

  177. [...] explodingboy podras encontrar una coleccion de 11 menus CSS gratuitos, puedes ver y descargar todos los menus. [...]

  178. [...] Free CSS Navigation Menu [...]

  179. [...] önce css tabs’lari nereden buluruz diyorsaniz burada verilmis istiyorsaniz sizde yapabilirsiniz programla ama ben hazirini [...]

  180. [...] önce css tabs’lari nereden buluruz diyorsaniz burada verilmis istiyorsaniz sizde yapabilirsiniz programla ama ben hazirini [...]

  181. [...] 11 css yönlendirme menüsü [...]

  182. [...] theme makes use of famfam silk icons and modified menu tab graphics – many thanks to those concerned. Bookmark: These icons link to social bookmarking sites where [...]

  183. Çok güzel örnekler beni anlamazsanızda ellerinize sağlık.

  184. [...] 11 CSS navigation menus [...]

  185. [...] 11 CSS navigation menus : at Exploding Boy [...]

  186. [...] [...]

  187. [...] Free CSS Navigation Menu Designs [...]

  188. [...] 11 css yönlendirme menüsü [...]

  189. Sliding Doors of CSS google reveals several variations and some prebuilt menus eg Free CSS Navigation Menu Designs at ExplodingBoy Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style has some

  190. Hi,

    I’m trying to position the navigation menu. I added the following code in:

    #Navigation {
    float:left;
    width:100%;
    background:#000;
    font-size:93%;
    line-height:normal;


    position: absolute;
    top:500px;
    right:500px;
    }

    It doesn’t work :( Can u teach me how?

  191. Hi, I’m working on a design that uses your pink buttons and I love them in Internet Explorer. However, in Firefox, no content appears below the buttons. Do you have a Firefox hack?
    Thanks!
    Eve

  192. 11 CSS navigation menus

  193. [...] next example is often used in navigation menus that incorporate a background image for the links. One background image is used for both the [...]

  194. Mil gracias es lo que handaba buscando!

  195. [...] de ExplodingBoy pone a disposición de todos, una hermosa colección de menús del tipo tabs que podremos usar en [...]

  196. hi there,
    working on a project for our sister station, thinking we’ll use your slider F. just wanted to say: “nice work” and “thanks so much” :)

    cheers -jon

  197. man thank you so much this was so helpful
    and every website offering it for huge price
    thanks again and keep it up

  198. Hi Christopher, awesome stuff, thanks for sharing. I am a real newbie and I have been trying to figure out how to make the tabs wider to suit longer text in the tabs – when longer text is added the background does not shade correctly – but just CAN’T figure it out – can you please assist?

    thanks heaps

    Lynton

  199. Nice.. simple designs but effective!

  200. [...] Free CSS Navigation menus – These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit [...]

  201. thanks you.

  202. These are great. The CSS is much more streamlined than in other CSS navs I’ve seen, and it works in every browser I’ve tested in. Thanks a lot for these.

  203. thank you….

  204. [...] 11 CSS navigation menus : at Exploding Boy [...]

  205. Excelente cosa, gracias por compartirlo. Estoy entrando recien a php y todo lo que es software libre y me admiro muchisimo que productos microsoft tenga mas codigo openSource.

  206. [...] 11 horizontal menus, based on Sliding Doors [...]

  207. thank you…

  208. Nice..

  209. thank you…..

  210. Thanks so much!

    These are great!

  211. Cool

    Thanks

  212. [...] 11 css yönlendirme menüsü [...]

  213. thank you….

  214. Great work. keep it up. Thanks…………….

  215. thank you…

  216. Thanks, U rock!

  217. bravo!
    buone vacanze…
    ciao.

  218. Thank you very much :-)

  219. Thanks a lot. I’m gonna use it. :)

  220. Thanks for the menu’s – They worked a treat. Im only just learning HTML and CSS and they proved useful

  221. Thanx ;)

  222. Thanks! Helped me a lot :-)

  223. Rimsky went look closer buy cytotec meat steamed daughters.

  224. Danax
    Danax

  225. CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  226. [...] 11 CSS navigation menus : at Exploding Boy [...]

  227. Thank you so much for the sweet design! Great work truly!

  228. Thanks, great job!

  229. its very nice good project.

  230. HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

  231. [...] Free CSS Navigation menus - These eleven CSS navigation menus are created using the Sliding Doors technique, and will even work in everyone’s favorite browser Internet Explorer. You may download the entire set and use any way you see fit [...]

  232. Very nice CSS menus.
    Thx :)

  233. Thank you very much.

  234. Thanks a lot for the tabs……They are really nice.

    PS: nice work

  235. [...] 3. Free CSS Navigation Menu Designs – from Exploding Boy [...]

  236. [...] Free CSS Navigation Menu Designs [...]

  237. [...] Free CSS Navigation Menu Designs [...]

  238. excellent.
    Just implemented in my blog
    Ebooks Catalog

  239. is there a way to change which tab appears active by default when the page is loaded?

  240. Simple and nice… thanks ^^.

  241. [...] Free CSS Navigation Menu Designs [...]

  242. Great collection of css menus :)

    Keep up the good work!

  243. Help, please?
    I really wanna use one of these CSS drop down menus in blogger, but i’ve tried and it doesn’t work.
    The frustration is getting to me!

    Care to help.. maybe instructions on how to do this?

    Thanks!

  244. Thanks for share. Keep up the good work !
    Nice to meet you

  245. [...] Free CSS Navigation Menu Designs [...]

  246. [...] de ExplodingBoy pone a disposición de todos, una hermosa colección de menús del tipo tabs que podremos usar en [...]

  247. How would i use this is zen cart? Anyone know??

  248. [...] 11 CSS navigation menus : at Exploding Boy [...]

  249. When I preview the menus all I get are static images, http://www.stocktongov.com/bluegreycssmenu.html

  250. Me also agree Firefox is a very good browser. no one can beat this belong to the other.i read this article via Firefox only.people always cheers
    social bookmark site listed below for an awareness view and enjoy this site.
    ——————————-
    gomez

    Social Bookmarking

  251. can you suggest the layers on mouse hover of the CSS menu to open the submenu?

  252. Awesome .. Thanks…
    Can u tell me how to make a dropdown menu with this.
    :)

    But Definately Gr8 work

  253. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  254. [...] 11 css yönlendirme menüsü [...]

  255. Vopat waddled through bound and gagged anime girls thevents on my arm hadtightened. I.

  256. [...] PORTAL EXPLODING BOY (1) (2) [...]

  257. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  258. Excellent Code and Menu’s, have been sharing this with friends and others, and have given credit where its due. Thanks again :-)

  259. Dear Christopher,

    I have tried to dissect and analyze the code for this menu set and have stumbled upon several things I could not explain myself.
    May I ask you to help me with this analysis?
    I just would like to design such things being fully aware about possible ways of achievening the desired effect.

    Kind regards
    Andrey

  260. good job :D

  261. Sorry – can someone help? I still cannot get the active tab to work!


    #menu1 {
    width: 200px;
    margin: 10px;
    border-style: solid solid none solid;
    border-color: #3D261D;
    border-size: 1px;
    border-width: 1px;
    }

    #menu1 li a {
    height: 32px;
    voice-family: “\”}\”";
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    }

    #menu1 li a:link, #menu1 li a:visited {
    color: #E4D6CD;
    display: block;
    background: url(menu1.gif);
    padding: 8px 0 0 10px;
    }

    #menu1 li a:hover {
    color: #FFF;
    background: url(menu1.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }

    #menu1a:hover span, #menu1 a#activetab span
    { background-position:100% -32px;color: #FFF; }

    #menu1 a:link#activetab, #menu1 a:visited#activetab, #menu1 a:hover
    { background-position: 0% -32px; }

    Link 1
    Link 2

  262. Thank you.

  263. [...] 11 CSS navigation menus : at Exploding Boy [...]

  264. 非常好

  265. [...] at ExplodingBoy [...]

  266. Thanks for the menus

  267. Great tabs, thanks! Any chance I can get the original design files to alter?

  268. [...] Free CSS Navigation Menu Designs Free CSS Navigation Menu Designs at ExplodingBoy – Familiar to dozens [...]

  269. 很好很强大,谢谢！

  270. Nice job !!!

  271. Thanks

  272. First of all,

    Thanks for sharing the great menu! To those of you who are having trouble with the “active” state. Try this trick: Retype the quotes on the “activetab” id and it should work. When you copy and paste the code from this page, I guess the quotes was converted to smart quotes or something that browser doesn’t recognize. Also Change the font color to something other than white if you’re following Bradley’s comment. Hopefully that works.

  273. [...] 11 CSS navigation menus : at Exploding Boy [...]

  274. Thank you.

  275. [...] Designs (Artikel hier) in der Sliding Door Technik im CSS, ganz gut [...]

  276. [...] Explodingboy 11 CSS Menus [...]

  277. [...] 11 CSS Menus By Exploding Boy [...]

  278. [...] 11 CSS Menus By Exploding Boy [...]

  279. [...] 2. Navigation menu designs by exploding boy: [...]

  280. [...] Free CSS Navigation Menu Designs [...]

  281. [...] Explodingboy 11 CSS Menus [...]

  282. [...] 11 CSS Menus By Exploding Boy [...]

  283. [...] – Free CSS Navigation Menu Designs [...]

  284. [...] Free CSS Navigation Menu Designs [...]

  285. [...] 11 CSS navigation menus : at Exploding Boy [...]

  286. [...] 11 CSS navigation menus : at Exploding Boy [...]

  287. [...] 11 CSS navigation menus : at Exploding Boy 2. 12 more CSS Navigation Menus. : at Exploding Boy 3. 14 Free Vertical CSS [...]

  288. Some great designs, simple yet effective

  289. [...] BOY (1) (2) [...]

Comments are closed.

Date & Time

You are reading “Free CSS Navigation Menu Designs”, an entry originally published on Thursday, December 15, 2005 at 9:50 am and filed under Design.

Commentary

There are currently 289 Comments on this entry. If you have something to say, feel free to leave a comment or post a trackback from your own site.

You can also follow the discussion through an RSS feed of this entry’s comments.

Related Entries

Recent Entries

Noteworthy Entries

Grab The Feeds