Menu23
 Önizlemeyi Görmek İçin Resme Tıklayınız! |
<link href="http://www.jsindir.com/testalani/style.css" media="screen" type="text/css" rel="stylesheet" />
<link href="http://www.jsindir.com/testalani/style_freedl.css" media="screen" type="text/css" rel="stylesheet" />
<title>CSS Menu - Viala</title>
<style type="text/css">
/* MENU CSS*/
#nav {
cursor: pointer;
width: 100%;
}
#nav a {
cursor: pointer;
font-family: Arial;
color: #000000;
font-weight: bold;
font-size: 12px;
}
#nav, #nav ul {
max-width: 780px;
padding: 2px;
margin:0;
list-style:none;
text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #663333;
}
/*főmenü elemek*/
#nav li {
border-left: 1px solid #999;
background: #F9F8F8;
position: relative;
float: left;
width: 85px;
height: 20px;
padding: 2px;
padding-bottom: 0px;
}
#nav li li{
border-left: none;
}
#nav li:hover,
#nav li.iehover {
background: #cc3333;
color: #fff;
}
#nav li ul li:hover,
#nav li ul li.iehover {
color: #fff;
}
#nav li ul {
position: absolute;
background: #fff;
border: 1px solid #999;
top: -1000px;
}
#nav li ul li {
background: #fff;
width: 160px;
text-align: left;
padding-left: 5px;
}
#nav li:hover ul,
#nav li.iehover ul {
left: 1.2em;
top: 18px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
top: -1000px;
}
#nav li li:hover ul, #nav li li li:hover ul {
left:5em;
top:0;
}
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.iehover ul ul,
#nav li.iehover ul ul ul {
top: -1000px;
}
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {
left:30px;
top:18px;
}
#nav iframe {
position: absolute;
left: 0;
top: 0;
z-index: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
</style> <script>
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
if (checkIt('konqueror'))
{
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible'))
{
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if (!OS)
{
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
function checkIt(string)
{
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
Menu = function() {
//ie indexes the elements backward and requires li, that is why z-index has to be reduced (1000-i)
//firefox requires indexed ul
//opera works well
if(browser == "Netscape Navigator") {
var mL = document.getElementById('nav').getElementsByTagName('ul');
for (var f=0; f<mL.length; f++){
mL[f].style.zIndex=f+1;
}
}
if(browser == "Internet Explorer") {
var ieLIs = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<ieLIs.length; i++){
if (ieLIs[i]) {
ieLIs[i].style.zIndex=(1000-i);
ieLIs[i].onmouseenter = function() {
var ieUL = this.getElementsByTagName('ul')[0];
if (ieUL) {
var ieMat = document.createElement('iframe');
ieMat.style.width=ieUL.offsetWidth+"px";
ieMat.style.height=ieUL.offsetHeight+"px";
ieUL.insertBefore(ieMat,ieUL.firstChild);
}
this.className+=" iehover";
}
ieLIs[i].onmouseleave = function() {
this.className=this.className.replace(' iehover', '');
}
}
}
}
}
window.onload = Menu;
//if (window.attachEvent) window.attachEvent('onload', ieHover);
</script>
<div>
<ul id="nav">
<li><a href="http://eglencegunlugum.tr.gg/">Menu 1</a>
<ul>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 1 2</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 1 3</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 1 4</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 1 5</a></li>
</ul>
</li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 2</a>
<ul>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 2 1</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 2 2</a></li>
</ul>
</li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 3</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 4</a></li>
<li><a href="http://eglencegunlugum.tr.gg/">Menu 5</a></li>
</ul>
</div>
