Archive for the ‘ Css Menu ’ Category
TweetCSS sprites are all the rage these days. And why shouldn’t be? They’re easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 – It’s JavaScript Time. In his post he outlined a method for enhancing the CSS sprite menu [ READ MORE ]
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 ]
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 ]
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 ]
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 ]
Tweet#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#dolphinnav ul li{display:block;float:left;margin:0 1px;}#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_bg-OVER.gif) repeat-x bottom left;}#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/dolphin_right-ON.gif) no-repeat [ READ MORE ]
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 ]
Tweet#menu { font-family: Arial, sans-serif; font-weight: bold; text-transform: uppercase; margin: 50px 0; padding: 0; list-style-type: none; background-color: #eee; font-size: 13px; height: 40px; border-top: 2px solid #eee; border-bottom: 2px solid #ccc;}#menu li { float: left; margin: 0; }#menu li a { text-decoration: none; display: block; padding: 0 20px; line-height: 40px; color: #666;}#menu li a:hover, #menu li.active [ READ MORE ]
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 ]
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 ]
Tweetul#blue { margin:0; padding:0; list-style-type:none; }ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;}ul#blue .current { border-top:4px solid #3d496a;}ul#blue li:hover { border-top:4px solid #3d496a;}ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 12px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;}ul#blue li a:hover { color:#8895b8; border:none; }ul#blue li span{ display:none; position:absolute; [ READ MORE ]
Tweet/* CSS Document */.rhm1{width:580px;height:64px;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg.gif) repeat-x; }.rhm1-left{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_l.gif) no-repeat;width:15px;height:64px;float:left;}.rhm1-right{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_r.gif) no-repeat;width:15px;height:64px;float:right;}.rhm1-bg{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg.gif) repeat-x;height:64px;}.rhm1-bg ul{list-style:none;margin:0 auto;}.rhm1-bg li{float:left;list-style:none;}.rhm1-bg li a{float:left;display:block;color:#ffe8cc;text-decoration:none;font:12px 'Lucida Sans', sans-serif;font-weight:bold;padding:0 0 0 18px;height:64px;line-height:40px;text-align:center;cursor:pointer; }.rhm1-bg li a span{float:left;display:block;padding:0 32px 0 18px;}.rhm1-bg li.current a{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_l.gif) no-repeat left 5px;}.rhm1-bg li.current a span{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_r.gif) no-repeat right 5px;}.rhm1-bg li a:hover{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_l.gif) no-repeat left 5px;}.rhm1-bg li a:hover span{color:#fff;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_hover_r.gif) no-repeat right 5px;}.redrhm1{width:580px;height:64px;background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg3.gif) repeat-x; }.redrhm1-left{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_l3.gif) no-repeat;width:15px;height:64px;float:left;}.redrhm1-right{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_r3.gif) no-repeat;width:15px;height:64px;float:right;}.redrhm1-bg{background:url(http://www.phpasks.com/blogs/wp-content/uploads/2009/11/rhm1_bg3.gif) repeat-x;height:64px;}.redrhm1-bg ul{list-style:none;margin:0 [ READ MORE ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
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 ]
Error: Twitter did not respond. Please wait a few minutes and refresh this page.