Posts Tagged ‘ dhtml css menu ’

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 ]