Making use of last yearsfree Web 2.0 buttonsI've produced a collection of five free complete CSS tab menus,利用滑动门技术,允许选项卡根据所包含文本的长度水平展开。

Take your pick ofBlack,蓝色的,Green,Greyor红色,with each menu being available to download as a zip file containing the relevant files.Open the html file into an editor or view the source and copy the CSS code and unordered list into your own documents,then replace the textual content from within the list items with your personal menu titles.

The menus have been tested and appear to work without issue in Firefox,IE7,IE6,歌剧和游猎。

34 Comments submitted Add yours!
Subscribe receive beplay全方位手机移动娱乐平台Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts


  1. I originally produced a menu without the span tags,by using the :hover pseudo class on the actual list item.Unfortunately this isn't supported by IE6 so the span tags have to come out to play to solve this.:-)

    At least the future of CSS3 will allow for an even better solution with multiple backgrounds!


  2. I really like the black one.我也下载了它,我喜欢你保持代码整洁。
    Free stuff is always useful.

  3. @Patrick
    谢谢,but where exactly do I have do insert
    margin:0px auto;
    I tried several posibilities,but I am not a css pro,rather a beginner.So could you post the adapted code?

  4. Of course.Using the "Black"template,the code is below.You'll need to specify a width property for the div to center,so change "520px"更改菜单名称后,调整到适当的宽度。

    * {
    margin: 0;
    padding: 0;

    body {
    margin: 30px;
    text-align:center;/* THIS WAS ADDED */

    /* THIS WAD ADDED */
    #navbar { margin:0px auto;width:520px;}

    #navbar ul li {
    display: inline;/* Fix IE Step Down */

  5. @Patrick
    thanks a lot,I got it and it works :)

    but one thing I still do not understand is how you got the value of the width (520px) and why it is necessary to indicate the width at all.Without the width the whole nav floats back to the left…but why does this happen although the left and right margin is to set ‘auto'?


Comments are now closed