Posts Tagged ‘ Menu ’

jQuery Menu – Dropdown, iPod Drilldown and Flyout Styles

TweetjQuery Menu – easily create dropdown, iPod drilldown and flyout styled menus. jQuery Menu comes with built in the ability to customize a menu’s appearance, including active and hover states, by passing in classes as options, menus can be styled on the fly using ThemeRoller. By default, the menu script will transform an unordered list [ 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 ]

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 ]

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 ]