OnlyCssMenu.com » download step navigation menu http://www.onlycssmenu.com The best example of CSS base menu Wed, 17 Feb 2010 17:02:21 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 CSS3.0 Red Tab Menu http://www.onlycssmenu.com/css3-0-red-tab-menu.html http://www.onlycssmenu.com/css3-0-red-tab-menu.html#comments Sun, 02 Aug 2009 10:47:04 +0000 admin http://www.onlycssmenu.com/css3-0-red-tab-menu.html css30tabmenu

HTML

  • <div id="cssmenu_red">
  • <ul>
  • <li class="selected"><a href="#">Css Menu </a></li>
  • <li><a

…

]]> css30tabmenu

HTML

  • <div id="cssmenu_red">
  • <ul>
  • <li class="selected"><a href="#">Css Menu </a></li>
  • <li><a href="#">Only Css Menu</a></li>
  • <li><a href="#">CSS3.0 Menu</a></li>
  • <li><a href="#">Web 2.0 Menu</a></li>
  • <li><a href="#">Css Menu</a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • #cssmenu_red {
  • font-size : 0.8em;
  • line-height : 1.6em;
  • height : 38px;
  • font-variant:normal;
  • background:url(images/top_navigation_bottom.png) repeat-x bottom;
  • overflow : visible;
  • margin:10px 10px 10px 10px;
  • -moz-border-radius-bottomleft :10px;
  • -webkit-border-bottom-left-radius:10px;
  • -moz-border-radius-bottomright:10px;
  • -webkit-border-bottom-right-radius:10px;
  • }
  • #cssmenu_red ul {
  • margin : 2px 8px 2px 0px;
  • position : absolute;
  • padding:0;
  • list-style:none;
  • z-index : 10;
  • }
  • #cssmenu_red a {
  • color : Black;
  • text-decoration : none;
  • display : block;
  • }
  • #cssmenu_red ul li:first-child {
  • padding:0 12px 4px 11px;
  • }
  • #cssmenu_red ul li {
  • float : left;
  • background:url(images/top_menu_bg.png) repeat-x bottom;
  • margin-right : 11px;
  • padding : 0 11px 4px 11px;
  • -moz-border-radius-topleft :10px;
  • -webkit-border-top-left-radius:10px;
  • -moz-border-radius-topright:10px;
  • -webkit-border-top-right-radius:10px;
  • height : 21px;
  • line-height:25px;
  • overflow : visible;
  • border:solid 1px #d7d7d7;
  • border-width: 1px 1px 0 1px;
  • }
  • #cssmenu_red ul li.selected {
  • background-image : url(images/top_menu_hover_bg.png);
  • border-color:#cf0100;
  • }
  • #cssmenu_red ul li.selected a {
  • color:#FFF;
  • }
  • #cssmenu_red ul li:hover {
  • background-image : url(images/top_menu_hover_bg.png);
  • overflow : visible;
  • color:#FFFFFF;
  • height : 21px;
  • line-height:25px;
  • border-color:#cf0100;
  • }
  • #cssmenu_red ul li:hover a {
  • color:#FFFFFF;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/css3-0-red-tab-menu.html/feed 0 Step Navigation http://www.onlycssmenu.com/step-navigation.html http://www.onlycssmenu.com/step-navigation.html#comments Sun, 19 Jul 2009 15:15:12 +0000 admin http://www.onlycssmenu.com/?p=75 step_panel

  • Step 1
  • Step 2
  • Step 3
  • step_panel

    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 1
    • Step 2
    • Step 3
    • Step 4
    • Step 1
    • Step 2
    • Step 3
    • Step 4

    HTML

    • <ul id="green_and_orange_step_menu">
    • <li class="frist ">Step 1</li>
    • <li>Step 2<span></span></li>
    • <li>Step 3<span></span></li>
    • <li class="last">Step 4<span></span></li>
    • </ul>
    • <div style="clear:both;"></div>
    • <ul id="green_and_orange_step_menu">
    • <li class="frist fdone">Step 1</li>
    • <li class="inprogress">Step 2<span></span></li>
    • <li>Step 3<span></span></li>
    • <li class="last">Step 4<span></span></li>
    • </ul>
    • <div style="clear:both;"></div>
    • <ul id="green_and_orange_step_menu">
    • <li class="frist fdone">Step 1</li>
    • <li class="done">Step 2<span></span></li>
    • <li class="inprogress">Step 3<span></span></li>
    • <li class="last">Step 4<span></span></li>
    • </ul>
    • <div style="clear:both;"></div>
    • <ul id="green_and_orange_step_menu">
    • <li class="frist fdone">Step 1</li>
    • <li class="done">Step 2<span></span></li>
    • <li class="done">Step 3<span></span></li>
    • <li class="last lastinprogress">Step 4<span></span></li>
    • </ul>
    • <div style="clear:both;"></div>
    • <ul id="green_and_orange_step_menu">
    • <li class="frist fdone">Step 1</li>
    • <li class="done">Step 2<span></span></li>
    • <li class="done">Step 3<span></span></li>
    • <li class="last ldone">Step 4<span></span></li>
    • </ul>

    CSS

    • <style>
    • #green_and_orange_step_menu { margin:0; padding:5px; display:inline-table; list-style:none; }
    • #green_and_orange_step_menu li{ display:inline; float:left; background:url(images/step_orange_green.gif) no-repeat -50px bottom; height:41px; line-height:41px; font-size:11px; padding:0 30px 0 25px; position:relative;}
    • #green_and_orange_step_menu li span{ margin:0px; z-index:2000; background:url(images/step_orange_green.gif) no-repeat left bottom; display:block; position:absolute; height:41px; line-height:41px; width:13px; top:0; left:-10px; padding:0;}
    • #green_and_orange_step_menu li.inprogress { background-position:-50px 0px}
    • #green_and_orange_step_menu li.inprogress span, #green_and_orange_step_menu li.lastinprogress span{background-position:left 0px }
    • #green_and_orange_step_menu li.done {background-position: -50px -41px}
    • #green_and_orange_step_menu li.done span, #green_and_orange_step_menu li.ldone span {background-position:left -41px }
    • #green_and_orange_step_menu li.frist, #green_and_orange_step_menu li.done, #green_and_orange_step_menu li.inprogress, #green_and_orange_step_menu li.ldone, #green_and_orange_step_menu li.lastinprogress { color:#FFF;}
    • #green_and_orange_step_menu li.frist {background-position: -20px 0px }
    • #green_and_orange_step_menu li.fdone { background-position: -20px -41px }
    • #green_and_orange_step_menu li.last {background-position: right bottom }
    • #green_and_orange_step_menu li.lastinprogress { background-position: right 0}
    • #green_and_orange_step_menu li.ldone { background-position: right -41px}
    • </style>

    Browser Compatability

    • FireFox
    • IE7
    • Safari
    • Opera
    ]]> http://www.onlycssmenu.com/step-navigation.html/feed 0