OnlyCssMenu.com » download vertical 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 Blue Panel With Menu http://www.onlycssmenu.com/blue-panel-with-menu.html http://www.onlycssmenu.com/blue-panel-with-menu.html#comments Sun, 16 Aug 2009 04:01:22 +0000 admin http://www.onlycssmenu.com/?p=150 Blue Panel With menu

Latest Menu Panel

HTML

…

]]> Blue Panel With menu

Latest Menu Panel

HTML

  • <div class="Blue_panel_with_menu clearfix">
  • <h2><span>Latest Menu Panel</span></h2>
  • <div class="panel_blue_container">
  • <ul class="left_navigation clearfix">
  • <li><a href="#" class="active" title="Css Menu">Css Menu</a></li>
  • <li><a href="#" title="Web 2.0 Menu">Web 2.0 Menu</a></li>
  • <li><a href="#" title="Only Css Menu">Only Css Menu</a></li>
  • <li><a href="#" title="CSS Based Menu">CSS Based Menu</a></li>
  • <li><a href="#" title="DHTML Menu">DHTML Menu</a></li>
  • </ul>
  • </div>
  • <div class="bl"></div>
  • <div class="br"></div>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .Blue_panel_with_menu {
  • margin:0 0 4px 0;
  • padding:0;
  • display:block;
  • position:relative;
  • width:200px;
  • }
  • .Blue_panel_with_menu h2 {
  • background:url(images/blue_panle_w_m_panel_box_h_tr.gif) no-repeat left top;
  • margin:0;
  • padding:0 0 0 30px;
  • font-size:14px;
  • color:#ffffff;
  • font-weight:normal;
  • }
  • .Blue_panel_with_menu h2 span {
  • background:url(images/blue_panle_w_m_panel_box_h_tr.gif) no-repeat right top;
  • display:block;
  • padding:8px 0 8px 0px;
  • }
  • .Blue_panel_with_menu h2:after {
  • content: &quot;.";
  • display:block;
  • height:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .Blue_panel_with_menu h2 {
  • display:inline-block;
  • }
  • * html .Blue_panel_with_menu h2 {
  • height:1%;
  • }
  • .Blue_panel_with_menu h2 {
  • display:block;
  • }
  • .Blue_panel_with_menu .panel_blue_container {
  • border:solid 1px #adadad;
  • border-width:0 1px 1px 1px;
  • padding:2px 0 0px 0;
  • }
  • .Blue_panel_with_menu .bl {
  • position:absolute;
  • display:block;
  • width:3px;
  • height:3px;
  • background:url(images/blue_panle_w_m_panel_box_bl.gif) no-repeat left top;
  • left:0;
  • bottom:0px;
  • _bottom:-1px;
  • font-size:0px;
  • }
  • .Blue_panel_with_menu .br {
  • position:absolute;
  • display:block;
  • width:3px;
  • height:3px;
  • background:url(images/blue_panle_w_m_panel_box_br.gif) no-repeat right top;
  • right:0;
  • bottom:0px;
  • _bottom:-1px;
  • font-size:0px;
  • line-height:0
  • }
  • .Blue_panel_with_menu .left_navigation {
  • margin:0;
  • padding:0 5px 20px 5px;
  • list-style:none;
  • }
  • .Blue_panel_with_menu .left_navigation li {
  • padding:8px 0;
  • background:url(images/blue_panle_w_m_left_menu_bdr_b.gif) repeat-x bottom;
  • }
  • .Blue_panel_with_menu .left_navigation li a {
  • background:url(images/blue_panle_w_m_left_menu_arrow.gif) no-repeat 10px 4px;
  • padding:0 0 0 25px;
  • text-decoration:none;
  • color:#464646;
  • display:block;
  • font-size:14px;
  • }
  • .Blue_panel_with_menu .left_navigation li a:hover {
  • text-decoration:underline;
  • color:#000;
  • background-image:url(images/blue_panle_w_m_left_menu_arrow_h.gif)
  • }
  • .Blue_panel_with_menu .left_navigation li a.active {
  • text-decoration:none;
  • color:#000;
  • background-image:url(images/blue_panle_w_m_left_menu_arrow_h.gif);
  • font-weight:bold;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/blue-panel-with-menu.html/feed 0 V Bule Style Menu http://www.onlycssmenu.com/v-bule-style-menu.html http://www.onlycssmenu.com/v-bule-style-menu.html#comments Sun, 16 Aug 2009 03:31:54 +0000 admin http://www.onlycssmenu.com/?p=144 Blue Hover Menu

HTML

  • <div class="Bule_style_menu clearfix">
  • <ul class="clearfix">

…

]]> Blue Hover Menu

HTML

  • <div class="Bule_style_menu clearfix">
  • <ul class="clearfix">
  • <li class="first"><a href="#" class="active" title="Only css menu"><span>Only css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Css Menu</span></a></li>
  • <li><a href="#" title="Only Css Menu"><span>Web 2.0 Menu</span></a></li>
  • <li><a href="#" title="Css Menu"><span>Web 2.0 Menu</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • .clearfix:after {
  • content: ".";
  • display:block;
  • height:0;
  • font-size:0;
  • clear:both;
  • visibility:hidden;
  • }
  • .clearfix {
  • display:inline-block;
  • }
  • * html .clearfix {
  • height:1%;
  • }
  • .clearfix {
  • display:block;
  • }
  • .Bule_style_menu {
  • background:url(images/top_menu_left.gif) no-repeat left top;
  • padding-left:5px;
  • }
  • .Bule_style_menu ul {
  • background:url(images/top_menu_right.gif) no-repeat right top;
  • display:block;
  • margin:0;
  • padding:0;
  • list-style:none;
  • }
  • .Bule_style_menu ul li {
  • display:inline;
  • float:left;
  • padding:4px 2px 4px 3px;
  • background:url(images/menu_sp.gif) no-repeat left 16px;
  • }
  • .Bule_style_menu ul li.first {
  • background-image:none;
  • }
  • .Bule_style_menu ul li a {
  • display:inline;
  • padding:0 0 0 5px;
  • float:left;
  • color:#FFFFFF;
  • text-decoration:none;
  • cursor:pointer
  • }
  • .Bule_style_menu ul li a span {
  • display:inline;
  • padding:0px 17px 0px 12px;
  • float:left;
  • height:36px;
  • line-height:36px;
  • color:#FFFFFF;
  • }
  • .Bule_style_menu ul li a:hover, .Bule_style_menu ul li a.active {
  • text-decoration:none;
  • background:url(images/top_nav_a_left.gif) no-repeat left top;
  • color:#020202;
  • }
  • .Bule_style_menu ul li a:hover span, .Bule_style_menu ul li a.active span {
  • background:url(images/top_nav_a_right.gif) no-repeat right top;
  • color:#020202;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/v-bule-style-menu.html/feed 0 Vertical Blue and orange menu http://www.onlycssmenu.com/vertical-blue-and-orange-menu-with-panel.html http://www.onlycssmenu.com/vertical-blue-and-orange-menu-with-panel.html#comments Sun, 26 Jul 2009 08:33:18 +0000 admin http://www.onlycssmenu.com/?p=84 Vertical Blue and orange menu

Categories Name

…

]]> Vertical Blue and orange menu

Categories Name

HTML

  • <div class="Blue_orange_menu">
  • <h2>Categories Name</h2>
  • <ul class="leftmenu">
  • <li><a href="#" title="Css menu"><span>Css Menu Link</span></a></li>
  • <li><a href="#" title="css horizontal menu"><span>Css Menu Link 1</span></a></li>
  • <li><a href="#" title="Css Menu Link"><span>Css Menu Link 2</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 3</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 4</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 5</span></a></li>
  • <li><a href="#" title="Css menu"><span>Css Menu Link 6</span></a></li>
  • </ul>
  • </div>

CSS

  • <style>
  • div.Blue_orange_menu {
  • background:url(images/blue_v_menu_bottom.gif) no-repeat bottom;
  • width:216px;
  • padding-bottom:3px;
  • float:left;
  • }
  • div.Blue_orange_menu h2 {
  • background:url(images/blue_v_menu_header.gif) no-repeat left top;
  • height:32px;
  • line-height:32px;
  • font-weight:normal;
  • color:#FFFFFF;
  • font-size:14px;
  • margin:0;
  • padding:0 0 0 28px;
  • font-size:16px;
  • }
  • div.Blue_orange_menu ul {
  • margin:0px;
  • background:#FFF;
  • display:block;
  • float:left;
  • width:208px;
  • padding:1px 4px 1px 2px;
  • list-style:none; border:solid 1px #4599ef; border-width:0 1px;
  • }
  • div.Blue_orange_menu ul li {
  • margin:0;
  • padding:0;
  • list-style:none;
  • clear:both;
  • }
  • div.Blue_orange_menu ul li a {
  • background:#737171 url(images/blue_v_menu_a_left.gif) no-repeat left top;
  • color:#ffffff;
  • float:left;
  • margin:4px 2px 1px 2px;
  • padding:0;
  • font-size:12px;
  • text-decoration:none;
  • width:205px;
  • font: bold 12px Verdana, Arial, Helvetica, sans-serif
  • }
  • div.Blue_orange_menu ul li a span {
  • background:url(images/blue_v_menu_a_right.gif) no-repeat right top;
  • color:#ffffff;
  • padding:7px 0 7px 25px;
  • display:block;
  • margin:0 0 0 0;
  • }
  • div.Blue_orange_menu ul li a:hover {
  • background:#737171 url(images/blue_v_menu_a_left_o.gif) no-repeat left top;
  • }
  • div.Blue_orange_menu ul li a:hover span {
  • background:url(images/blue_v_menu_a_right_o.gif) no-repeat right top;
  • }
  • </style>

Browser Compatability

  • FireFox
  • IE7
  • Safari
  • Opera
]]> http://www.onlycssmenu.com/vertical-blue-and-orange-menu-with-panel.html/feed 0 Gray Vertical Menu http://www.onlycssmenu.com/gray-verticalmenu.html http://www.onlycssmenu.com/gray-verticalmenu.html#comments Sat, 18 Jul 2009 16:44:49 +0000 admin http://www.onlycssmenu.com/?p=7 gray v menu

Only For Css MenuOnly For Css Menu 2 Only For Css Menu 3 Only Css Menu 4 Css

…

]]> gray v menu

Only For Css MenuOnly For Css Menu 2 Only For Css Menu 3 Only Css Menu 4 Css based Menu Only For Css Menu 6 Only For Css Menu 7

HTML

  • <div class="lefnav">
  • <a href="#" class="active" title="Only For Css Menu">Only For Css Menu</a>
  • <a href="#" title="Only For Css Menu">Only For Css Menu 2</a>
  • <a href="#" title="Only For Css Menu">Only For Css Menu 3</a>
  • <a href="#" title="Only Css Menu">Only Css Menu 4</a>
  • <a href="#" title=" Css based Menu">Css based Menu</a>
  • <a href="#">Only For Css Menu 6</a>
  • <a href="#" title="Only For Css Menu">Only For Css Menu 7</a>
  • </div>

CSS

  • <style>
  • div.lefnav {
  • border:none;
  • background:#44504f;
  • padding:1px 1px 0 1px;
  • width:200px;
  • }
  • div.lefnav a {
  • display:block;
  • height:25px;
  • font:12px/25px Tahoma, Arial, Helvetica, sans-serif;
  • background:#a7b0af;
  • color:#2a302f;
  • text-decoration:none;
  • padding-left:10px;
  • border-bottom:solid 1px #44504f;
  • }
  • div.lefnav a:hover, div.lefnav a:visited, div.lefnav a.active {
  • background:#44504f;
  • border-bottom:solid 1px #a7b0af;
  • color:#FFFFFF;
  • }</style>

Browser Compatability

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