nicht angemeldet
CSS / HTML - Verschiebung von Inhalte beim Mouseover auf Navigat
0 
Matthias Apsel
0 0
CSS / HTML - Verschiebung von Inhalte beim Mouseover auf Navigat
Hallo Leute,
seit einigen Tagen bin ich an meiner Website dran und nun habe komme ich einfach nicht mehr weiter.
Und zwar ich habe mir eine Navigationsleiste gebastelt mit einem DropDown Menü per Mouseover.
Das sieht bis jetzt alles gut aus und geht auch, nur wenn das Menü "runter rollt" verdeckt es einen kleinen Teil von einem Logo was darunter ist.
Nun wollte ich fragen wie schaffe ich es das beim Mouseover zusätzlich der darunter folgende Inhalt auch ein Stück sich nach unten bewegt ?
MFG Kai
-
Om nah hoo pez nyeetz, Kai!
Das sieht bis jetzt alles gut aus und geht auch, nur wenn das Menü "runter rollt" verdeckt es einen kleinen Teil von einem Logo was darunter ist.
Ich glaube, das ist das erwartete Verhalten.
Nun wollte ich fragen wie schaffe ich es das beim Mouseover zusätzlich der darunter folgende Inhalt auch ein Stück sich nach unten bewegt ?
Möchtest du wirklich, dass sich die gesamte Seite bewegt, nur weil ein Menü ausklappt und das Logo ein klein wenig überdeckt ist?
Ohne Kenntnis der Seite lässt sich nicht viel sagen. Die Vermutung ist, dass das Menü nicht im normalen Textfluss ist, z.B. durch absolute Positionierung.
Matthias
-
Hier ist der CSS Code der Navigation:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script><style>
body
{
width: 960px;
margin: 40px auto;
}/* Main menu */
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}#menu li:hover > a
{
color: #fafafa;
}*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}#menu li:hover > ul
{
display: block;
}/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}#menu ul ul
{
top: 0;
left: 150px;
}#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}*html #menu ul a /* IE6 */
{
height: 10px;
}*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>(Man muss dazu sagen das die Navigation das einzige was ich nicht selbst gemacht habe.)
-
Om nah hoo pez nyeetz, Kai!
css ist ohne das html, auf das es wirken soll, sinnlos.
Matthias
-
-
-
<ul id="menu">
<li><a href="#">Menü</a>
<ul>
<li>
<a href="#">Menü</a></li> <li> <a href="#">Menü</a> </li> </ul></li>
<li>
<a href="#">Menü</a>
<ul>
<li>
<a href="#">Menü</a></li> <li> <a href="#">Menü</a> </li> <li> <a href="#">Menü</a> </li> </ul> </li> <li> <a href="#">Menü</a> <ul> <li> <a href="#">Menü</a> </li> <li> <a href="#">Menü</a> </li> <li> <a href="#">Menü</a> </li> </ul> </li> <li> <a href="#">Menü</a> </li> <li> <a href="#">Menü</a> </li></ul>
<!-- Hier kommt der untere Teil der Website den ich gerne verschieben würde, er ist in einen div Element-->
<div id="inhalt">
<b>Inhalt</b>
</div>
-
#Push, niemand der mir da weiterhelfen kann ? :S
