I'm using a menu in a DIV (wrapper). Now i would like to open the links from the menu in another DIV (TEST). Until now i found only this method (not nice) with an iframe. Is there another solution - perhaps with javascript (but without ajax or php)?
Thanks a lot!
Best regards, Ronny
body { margin:0; background-color: #333333;}
.wrapper{
width: 960px;
margin: 0 auto;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
/* background: url("ronny_logo.jpg"); */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 10;
margin-top: 120px;
}
/* MENU */
#main_menu{
margin:0px;
padding:0;
height: 150px;
/* width: 100%; /* Breite vom Hauptmenü Container */
padding: 0px 0;
/*overflow: hidden; Remove this*/
position: fixed;
background-color: black;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
.TEST{
width: 960px;
margin: 0 auto;
font-size: 19pt;
color: #FF0000;
z-index: 10;
margin-top: 120px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.O.N.N.Y | Containertest</title>
<META NAME="author" CONTENT="R.O.N.N.Y">
<META NAME="publisher" CONTENT="R.O.N.N.Y">
<META NAME="description" CONTENT="Ulla Neugebauer, Das Presshaus, Neugeboren in Hebammenhand, Ladendorf, Hebamme">
<META HTTP-EQUIV="reply to" CONTENT="">
<META NAME="language" CONTENT="de">
<META NAME="keywords" CONTENT="Neugebauer, Ulla, Hebamme, Geburt, Ladendorf, Presshaus, Neugeboren, Hebammenhand, dasPresshaus">
<META NAME="robots" CONTENT="index">
<META NAME="page-topic" CONTENT="Geburt, Hebamme, Gesundheit, sonstiges">
<META NAME="audience" CONTENT="alle, anfänger, azubis, erwachsene, experten, fans, fortgeschrittene, frauen, jugendliche, kinder, profis, schüler, studenten">
<META NAME="revisit-after" CONTENT="01 month">
<link rel="SHORTCUT ICON" href="favicon.ico" />
</head>
<body>
<div class="wrapper">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
<a href="#">Home</a>
</li>
<li class="green">
<a href="#">Evenementen</a>
<ul class="submenu">
<li>
<a href="http://www.a1.net" target="irgendwas">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
</ul>
</li>
<li class="blue">
<a href="#">Bus</a>
</li>
<li class="orange">
<a href="contact.html" target="irgendwas">Contact</a>
</li>
</ul>
</div>
<div class="TEST">
<iframe src="home.html" style="width:300px; height:600px;" frameborder="0" name="irgendwas"></iframe>
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
<p>g</p>
<p>g</p>
<p> </p>
<p>g</p>
<p>g</p>
<p> </p>
<p> </p>
<p>g</p>
<p>h</p>
<p>h</p>
<p>h</p>
<p>h</p>
<p>h</p>
<p> </p>
<p>h</p>
<p>h</p>
<p>h</p>
<p>h</p>
<p> </p>
<p> </p>
<p>g</p>
<p> </p>
<p>g</p>
<p>g</p>
</div>
</body>
</html>
