Suche im Forum:
Suchen


Autor Nachricht
Beitrag22.06.2007 um 19:55 (UTC)    
Titel: Auffklappbares Menü

Hallo,

ich wollte mal fragen wie man oben in der navi ein aufklappbares menü machen kann. Ich mein direkt unter dem header. also das da im STandard ein Text in dem Buttos steht(kein link) und wenn man mit der maus drüberfährt unterkategorien angezeigt werden die links sind.
Beitrag22.06.2007 um 20:12 (UTC)    
Titel:

Das ist ein code den musst du dann nur noch mit deinen links umwandeln

Code:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 3;
[color=red]top: 180px;
left:300px;[/color]
}

.menu li
{
width: 140px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(URL DES NORMALEN BUTTON);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
background-image: url(URL DES HOVER BUTTON);
{
background-color: #000099;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 16px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>



<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
MENÜ 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
MENÜ 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
MENÜ 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
MENÜ 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>
</ul>
</div>


mfg castro-fanpage.de.tl
Beitrag22.06.2007 um 20:18 (UTC)    
Titel:

castro-fanpage hat Folgendes geschrieben:
Das ist ein code den musst du dann nur noch mit deinen links umwandeln

Code:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 3;
[color=red]top: 180px;
left:300px;[/color]
}

.menu li
{
width: 140px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(URL DES NORMALEN BUTTON);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
background-image: url(URL DES HOVER BUTTON);
{
background-color: #000099;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 16px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>



<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
MENÜ 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
MENÜ 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
MENÜ 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
MENÜ 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>
</ul>
</div>


mfg castro-fanpage.de.tl


kannst du mir die pixelgröße der buttons aufschreiben(und danke)
Beitrag22.06.2007 um 20:58 (UTC)    
Titel:

eeeeehm das ist gut aber das ist über dem header und über der werbung. könntest du das ändern?
Beitrag23.06.2007 um 07:12 (UTC)    
Titel:

Zitat:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 18px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 180px;
left:300px;
}

.menu li
{
width: 140px;
float: left;
}

.menu a
{
border: 1px solid #888;
background-color: #000000;
background-image: url(URL DES NORMALEN BUTTON);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: default;
margin: 0px 2px;
display: block;
height: 20px;
color: #99ff00;
}

.menu a:hover
background-image: url(URL DES HOVER BUTTON);
{
background-color: #000099;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 16px;
display: none;
width: 140px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>



<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
MENÜ 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
MENÜ 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
MENÜ 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
MENÜ 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="URL">SUB MENÜ 1</a></li>
<li><a href="URL">SUB MENÜ 2</a></li>
<li><a href="URL">SUB MENÜ 3</a></li>
<li><a href="URL">SUB MENÜ 4</a></li>
<li><a href="URL">SUB MENÜ 5</a></li>
<li><a href="URL">SUB MENÜ 6</a></li>
</ul>
</li>
</ul>
</div>



Beim Rot markierten musst ein wenig rumspielen!!
______________
Gruss Flo
Meine Webseite ist nicht mehr 8m2.de.tl!! Klicke hier:
[img:459314d6c3]http://img.webme.com/pic/8/8m2/banner.gif[/img:459314d6c3]
[img:459314d6c3]http://therealdevils.de.tl/sig.png[/img:459314d6c3]
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de