Posts Tagged ‘ Css Menu ’

Free CSS Vertical Menu Designs

TweetFree CSS Vertical Menu Designs No. of Vertical Menu Demo DEMO h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #000;margin: 0px;padding: 0px 0px 0px 15px;}ul {list-style: none;margin: 0;padding: 0;}img {border: none;} /*- Menu 1--------------------------- */#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 [ READ MORE ]

Free CSS Navigation Menu Designs 2

TweetFree CSS Navigation Menu Designs 2 No. of Horizontal Menu Demo Here DEMO body {margin:0;padding:0;font: bold 11px/1.5em Verdana;}h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif;color: #000;margin: 0px;padding: 0px 0px 0px 15px;}img {border: none;} /*- Menu Tabs 1--------------------------- */ #tabs1 {float:left;width:100%;background:#F4F7FB;font-size:93%;line-height:normal;border-bottom:1px solid #BCD2E6;}#tabs1 ul {margin:0;padding:10px 10px 0 50px;list-style:none;}#tabs1 li {display:inline;margin:0;padding:0;}#tabs1 a {float:left;background:url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/tableft1.gif") no-repeat left top;margin:0;padding:0 0 [ READ MORE ]

Saturday CSS Menu

Tweetul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}ul#saturday li{display:block;float:left;margin:0;pading:0;}ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgDIVIDER.gif") no-repeat top right;}ul#saturday li a:hover{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgHOVER.gif") no-repeat top right;}ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/bgON.gif") no-repeat top right;} Saturday CSS Menu This menu is called “Saturday”, well, because I made it on a Saturday. A minty styled menu, with green [ READ MORE ]

Vert-One CSS Menu

Tweet #menucase ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;width:200px;} #menucase ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;border-bottom:1px solid #761A1A;} #menucase ul.vert-one li a{display:block;text-decoration:none;color:#fff;background:#600;padding:0 0 0 20px;width:180px;} #menucase ul.vert-one li a:hover{background:#900 url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/vert-one_arrow.gif") no-repeat 0 9px;} #menucase ul.vert-one li a.current,ul.vert-one li a.current:hover{background:#933 url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/vert-one_arrow.gif") no-repeat 0 9px;} The first vertical menu to be added to the site. What I like about this [ READ MORE ]

Time 4 Bed CSS Menu

Tweet#time4bed-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}#time4bed-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#time4bed-nav ul li{display:block;float:left;margin:0 2px;}#time4bed-nav ul li a{display:block;float:left;color:#ffdab6;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}#time4bed-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}#time4bed-nav ul li a:hover{color:#fff;}#time4bed-nav ul li a:hover span{display:block;cursor:pointer;}#time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{color:#894d12;background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_left-ON.gif") no-repeat top left;}#time4bed-nav ul li a.current span{background:transparent url("http://www.phpasks.com/blogs/wp-content/uploads/2009/11/time2bed_right-ON.gif") no-repeat top right;height:43px;} Time 4 Bed [ READ MORE ]

Fox CSS Menu

Tweet#foxmenucontainer{height:24px;background:#000;display:block;padding:45px 0 0 15px;}#foxmenu{position:relative;display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}#foxmenu ul li{display:block;float:left;margin:0 1px 0 0;}#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:5px 20px 0 20px;height:19px;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OFF.gif) no-repeat top left;}#foxmenu ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/foxmenu_bg-OVER.gif) no-repeat top right;}#foxmenu ul li a.current,#foxmenu ul li a.current:hover{color:#000;background:#fff;} Fox CSS Menu This menu is called “Fox” it’s crafty, bold and colorful. A great menu for use on dark sites, as [ READ MORE ]

Pro CSS Menu

Tweet#procontainer_brown {position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;}#pronav_brown {position:relative;height:32px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg.gif) repeat-x bottom left;padding:0 0 0 20px;border-bottom: 8px solid #886d53;}#pronav_brown ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#pronav_brown ul li {display:block;float:left;margin:0 1px;}#pronav_brown ul li a {display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:32px;}#pronav_brown ul li a span {padding:12px 20px 0 0;height:21px;float:left;font-weight: normal;font-family: "Myriad Pro", Helvetica, Arial, Verdana, sans-serif;}#pronav_brown ul li a:hover {color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/pro_bg-OVER.gif) repeat-x bottom left;}#pronav_brown ul li a:hover span {display:block;width:auto;cursor:pointer;}#pronav_brown ul li [ READ MORE ]

CSS and round corners: Making accessible menu tabs

Tweetli span {display:inline}.example1, .example2, .example3, .example4 {color:#000; background:#ffa20c; font-weight:bold}.example2, .example3, .example4 {background: #ffa20c url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10//navl-article.gif) left top no-repeat}.example3, .example4 {padding-left: 10px}.example3 span, .example4 span {background: #ffa20c url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10//navr-article.gif) right top no-repeat}.example4 span {padding-right: 10px}ul.navigation {list-style:none; padding:0; margin:0}* html ul.navigation {height:1%}.navigation li {float:left; margin:0; padding:0}.border {height:1em; background:#781351; clear:left}.navigation a, .navigation a:visited {color: #000; background: #ffa20c url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10//navl-article.gif) left top [ READ MORE ]

CSS Drop Down Menu Tutorial Code

Tweet/**************** menu coding *****************/#menu {width: 600px;background: #eee;float: left;}#menu ul {list-style: none;margin: 0;padding: 0;width: 12em;float: left;}#menu a, #menu h2 {font: bold 11px/16px arial, helvetica, sans-serif;display: block;border-width: 1px;border-style: solid;border-color: #ccc #888 #555 #bbb;margin: 0;padding: 2px 3px;}#menu h2 {color: #fff;background: #000;text-transform: uppercase;}#menu a {color: #000;background: #efefef;text-decoration: none;}#menu a:hover {color: #a00;background: #fff;}#menu li {position: relative;}#menu ul ul {position: absolute;z-index: [ READ MORE ]

A magnificent menu

Tweet#info {height:400px;}#enlarge {padding:0; margin:2em auto; list-style-type:none; background:#fff url(lines/back.gif); width:200px; height:200px; position:relative;}#enlarge li {width:200px; height:20px;}#enlarge li a {display:block; width:200px; height:20px; overflow:hidden; background:transparent; position:relative; text-indent:-10000px; z-index:100;}#enlarge li a:hover {position:absolute; top:0; left:0; width:200px; height:200px; z-index:1;}#enlarge li a.one:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/one.gif);}#enlarge li a.two:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/two.gif);}#enlarge li a.three:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/three.gif);}#enlarge li a.four:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/four.gif);}#enlarge li a.five:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/five.gif);}#enlarge li a.six:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/six.gif);}#enlarge li a.seven:hover {background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/10/lines/seven.gif);}#enlarge li a.eight:hover [ READ MORE ]

Another magnifier menu

Tweet#info {height:400px;}#enlarge {padding:0; margin:4em auto; list-style-type:none; width:240px; height:40px;}#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}#enlarge li a img {width:100%; height:100%; border:0;}#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;} Another magnifier menu Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Information Similar to the [ READ MORE ]

An enlarging unordered list

Tweet#easel {width:75px; height:100px; margin:3em auto;}#painters { padding:0; margin:0; list-style-type:none; }#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }#painters a { text-decoration:none; color:#000; position:absolute; width:75px; height:20px; display:block; text-align:center; }#painters a.red {background:#c00; color:#fff;}#painters a.orange {background:#fc0; color:#000;}#painters a.yellow {background:#ee0; color:#000;}#painters a.green {background:#080; color:#fff;}#painters a.blue {background:#00c; color:#fff;}#painters a:hover { width:120px; [ READ MORE ]

Horizontal sliding menu

Tweet#menu { margin:0; padding:0; width:45em; height:8.5em; overflow:hidden; background:#000; }#menu li { display:inline; list-style-type:none; }#menu li a { display:block; float:left; text-decoration:none; margin:0; }#menu li a img { opacity:0.7; margin:0.5em; border:0; float:left; }#menu li a span { display:none; }#menu li a:hover { background:#000; }#menu li a:hover img { opacity:1; }#menu li a:hover span { width:11em; color:#aaa; display:block; [ READ MORE ]

Sliding Tab Menu

Tweet #menu { margin:0; padding:0; height:32.5em; overflow:hidden; background:#f0f0f0; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; width:100%; } #menu li a span { display:none; color:#000; } #menu li a.one span { display:block; height:15em; margin:0 10px; } #menu li a:hover { background:#f1f1f1; } #menu li a:hover span [ READ MORE ]

Why CSS Menus?

TweetWhy CSS Menus? CSS Menus is a website set up to show how CSS can be used to style unordered lists and turn then into stylish, professional menus that would enhance the look of any website. CSS Menus are search engine friendly, they will allow search engines to easily navigate and spider your pages. They [ READ MORE ]

Image Link Text

Tweet.extra {display:inline; float:left; text-decoration:none; margin:0 25px; display:inline;}.extra em {font-style:normal;}.extra em.txt, .extra b {display:none;}.extra .head {display:block; width:200px; height:55px;}.extra .color1 {background:#9f7520;}.extra .color2 {background:#877660;}.extra .color3 {background:#8aaa7f;}.extra img {border:0; display:block;}.extra em.mh2 {padding-left:5px; margin:0; color:#000; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:24px;}.extra em.mh3 {padding-left:5px; margin:0; color:#fff; font-weight:normal; font-family: verdana, arial, sans-serif; font-size:16px;}.extra:hover {background:#fff; position:relative;cursor:pointer; text-decoration:none;}.extra:hover b {display:block; position:absolute; top:55px; left:0; width:200px; [ READ MORE ]

Example Menu two

Tweet#menu a, #menu a:visited {position:relative;text-decoration:none; text-align:center; background-color:#9ab; color:#fff; display:block; width:10em; border:2px solid #fff;border-color:#ACE2EF #678 #345 #cde;padding:0.25em;margin:0.5em auto;}#menu a:hover {top:2px;left:2px;color:#fff;border-color:#345 #cde #ACE2EF #678;} Example Menu two Item 1Item 2Item 3Item 4Item 5 Information Another change of border style on hover to give the effect of a button press. This is a quick and easy method of [ READ MORE ]

Example Menu one

Tweet #menu a, #menu a:visited { text-align:center; text-decoration:none; color:#000; display:block; width:7em; height:1.2em; border:0.5em solid #E7FAFF; } #menu a:hover { color:#fff; background-color:#b2ab9b; border-color:#dfd7ca #b2ab9b; } Example Menu one Item 1 Item 2 Item 3 Item 4 Item 5 Information Just a simple change of border style on hover. Cascading Style Sheet #menu a, #menu a:visited { [ READ MORE ]