kodcudost - yatay menu

Yeni Web Sitemize Gitmek İçin Tıklayınız

yatay menu

açılır menü1

<meta content="text/html; charset=iso-8859-9" http-equiv="Content-Type" /><style type="text/css"> body{ margin:0; padding:0; } ul#menu, ul#menu ul{ padding: 0; margin: 0; list-style: none; } ul#menu li { float: left; position: relative; width: 150px; } ul#menu li ul { display: none; position: absolute; top: 19px; /* yukseklik 25px + sonradan eklenecek paddingler 4px toplam 19px */ left:0; } ul#menu li > ul { top: auto; left: auto; } ul#menu li a { font: bold 13px Verdana, Arial, Helvetica, sans-serif; display: block; margin: 0; padding: 2px 3px; height: 23px; width: 144px; color: #000; background-image: url(https://img.webme.com/pic/r/rankend/pak1.png); text-decoration: none; } ul#menu li a:hover { color: #a00; background-image: url(https://img.webme.com/pic/r/rankend/pak1.png); } ul#menu li:hover ul, ul#menu li.over ul { display: block; } </style><script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("menu"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <ul id="menu"> <li><a href="#">Anasayfa</a></li> <li><a href="#">Konular</a> <ul> <li><a href="#">Konu1</a></li> <li><a href="#">Konu2</a></li> <li><a href="#">Konu3</a></li> </ul> </li> <li><a href="#">İTEM1</a> <ul> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU2</a></li> <li><a href="#">MENU3</a></li> <li><a href="#">MENU4</a></li> <li><a href="#">MENU5 </a></li> </ul> </li> <li><a href="#">İTEM 1</a> <ul> <li><a href="#">MENU 1</a></li> <li><a href="#">MENU2</a></li> <li><a href="#">MENU3</a></li> <li><a href="#">MENU4</a></li> <li><a href="#">MENU5 </a></li> </ul> </li> </ul> </li> </ul>

açılır menü2

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){	//On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> <style type="text/css"> #header .disclaimer a {	color: #ccc;} ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif) no-repeat 10px center; } #header img { margin: 20px 0 10px; } </style> </head> <body> <ul class="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">Tutorials</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li> <a href="#">Resources</a> <ul class="subnav"> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> <li><a href="#">Sub Nav Link</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div>

açılır menü3

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> <style type="text/css"> body{ margin:0; padding:0; } ul { padding: 0; margin: 0; list-style: none; } li { float: left; position: relative; width: 150px; background-color:#CCCCCC; } li ul { display: none; position: absolute; top: 19px; /* yukseklik 15px + sonradan eklenecek paddingler 4px toplam 19px */ left: 0; } ul li a { 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; color: #000; background: #efefef; text-decoration: none; } ul li a:hover { color: #a00; background: #fff; } li:hover ul, li.over ul { display: block; } </style> <script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("menu"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList; </script> <ul id="menu"> <li><a href="buraya link">ANA MEN&Uuml;</a></li> <li><a href="#">BURAYA MEN&Uuml;</a> <ul> <li><a href="buraya link">buraya alt men&uuml; </a></li> <li><a href="buraya link">buraya alt men&uuml; </a></li> <br /> </ul> </li> <li><a href="buraya link">BURAYA MEN&Uuml;</a> <ul> <li><a href="buraya link">buraya alt men&uuml;</a></li> <li><a href="buraya link">buraya alt men&uuml;</a></li> <li><a href="buraya link">buraya alt men&uuml;</a></li> <li><a href="buraya link">buraya alt men&uuml; </a></li> <li><a href="buraya link">buraya alt men&uuml; </a></li> </ul> </li> </ul> </meta>

menü4

<style type="text/css"> div.topbar{ /* bar that runs across the top of the menu */ height: 16px; background: #e16031; } ul.claybricks{ /* main menu UL */ font-weight: bold; width: 100%; background: #e3e490; padding: 6px 0 6px 0; /* padding of the 4 sides of the menu */ margin: 0; text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */ } ul.claybricks li{ display: inline; } ul.claybricks li a{ color:black; padding: 6px 8px 4px 8px; /* padding of the 4 sides of each menu link */ margin-right: 20px; /* spacing between each menu link */ text-decoration: none; } ul.claybricks li a:hover, ul.claybricks li a.selected{ color: white; background: #5d4137; background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%); /* moz syntax for CSS3 gradient */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05)); background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* webkit syntax for CSS3 gradient */ background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); /* opera syntax for CSS3 gradient */ background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 ); -moz-box-shadow: 0 0 5px #595959; /* moz syntax for CSS3 box shadows */ -webkit-box-shadow: 0 0 5px #595959; box-shadow: 0 0 5px #595959; padding-top: 17px; /* large padding to get menu item to protrude upwards */ padding-bottom: 6px; } </style> <div class="topbar"></div> <ul class="claybricks"> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a></li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul>

menü5

menü6

<link rel="stylesheet" type="text/css" href="droplinebar.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="droplinemenu.js" type="text/javascript"></script> <script type="text/javascript"> //build menu with DIV ID="myslidemenu" on page: droplinemenu.buildmenu("mydroplinemenu") </script><div id="mydroplinemenu" class="droplinebar"> <ul> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a> <ul> <li><a href="#">Activities 1</a></li> <li><a href="#">Activities 2</a></li> <li><a href="#">Activities 3</a> <ul> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> <li><a href="#">Water Sports 1</a></li> </ul> </li> <li><a href="#">Activities 4</a></li> </ul> </li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a> <ul> <li><a href="#">Traveling 1</a></li> <li><a href="#">Traveling 2</a></li> <li><a href="#">Traveling 3</a></li> <li><a href="#">Traveling 4</a> <ul> <li><a href="#">Africa 1</a></li> <li><a href="#">Africa 2</a></li> <li><a href="#">Africa 3</a></li> <li><a href="#">Africa 4</a> <ul> <li><a href="#">Kenya 1</a></li> <li><a href="#">Kenya 2</a></li> <li><a href="#">Kenya 3</a></li> <li><a href="#">Kenya 4</a></li> <li><a href="#">Kenya 5</a></li> </ul> </li> </ul> </li> <li><a href="#">Traveling 5</a></li> </ul> </li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul> </div>

menü7

<style type="text/css"> #tabs { float:left; width:100%; font-size:93%; line-height:normal; border-bottom:1px solid #666; margin-bottom:1em; /*margin between menu and rest of page*/ overflow:hidden; } #tabs ul { margin:0; padding:10px 10px 0 0px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url("media/left.png") no-repeat left top; margin:0; padding:0 0 0 6px; text-decoration:none; } #tabs a span { float:left; display:block; background:url("media/right.png") no-repeat right top; padding:6px 15px 4px 6px; margin-right:2px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style><div id="tabs"> <ul> <li></li> <li><a href="#"><span>Menu 1</span></a></li> <li><a href="#"><span>Menu 2</span></a></li> <li><a href="#"><span>Menu 3</span></a></li> <li><a href="#"><span>Menu 4</span></a></li> <li><a href="#"><span>Menu 5</span></a></li> <li><a href="#"><span>Menu 6</span></a></li> </ul> </div>

menü8

<style> ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */ font: bold 16px Georgia; } ul.arrowunderline li{ display:inline; margin-right:25px; /* spacing between each menu item */ } ul.arrowunderline li a{ position:relative; color:black; padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */ text-decoration:none; } ul.arrowunderline li a:hover{ border-bottom:3px solid purple; /* style of arrow underline */ } ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */ content:''; width:0; height:0; position:absolute; left:50%; margin-left:-5px; /* value should match border-width below */ bottom: 0; border-width:5px; /* value should match margin-left above */ border-style:solid; border-color: transparent transparent purple transparent; /* create up arrow */ } </style><ul class="arrowunderline"> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">New</a></li> <li class="selected"><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> <li><a href="http://tools.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> </ul>

menü9

<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="jquerycssmenu.js"></script><div id="myjquerymenu" class="jquerycssmenu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="#">Item 4</a></li> </ul> <br style="clear: left" /> </div>

menü10

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript" src="jqueryslidemenu.js"></script><div id="myslidemenu" class="jqueryslidemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div>

Bugün 5 ziyaretçi (6 klik) kişi burdaydı!

Bu web sitesi Bedava-Sitem.com ile ücretsiz oluşturuldu. Siz de kendi web sitenizi ister misiniz?

Ücretsiz kayıt ol