Suche im Forum:
Suchen


Autor Nachricht
Beitrag27.06.2012 um 15:34 (UTC)    
Titel: COOL MENU - li + ul + background

Hallo liebe HPBK-Community Smile

ich habe da erstmal eine allgemeine Frage zum cool-menu

"Ist es möglich zu jedem einzelnen menüpunkt und untermenüpunkt ein eigenständiges Hintergrundbild einzusetzen?"

Falls ja, wäre es möglich dies an diesem Code anzuhängen, oder muss ich es schon vorrangig definieren?

Code:
<li> <a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">Galerie</a></a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li><a href="/Galerie.htm">Shootings</a></li>
<li><a href="/Eventfotos.htm">Eventsfotos</a></li>
<li><a href="/Verschiedenes.htm">Verschiedenes</a></li>
</ul>
</li>


Gruß, Stony
Beitrag27.06.2012 um 16:01 (UTC)    
Titel:

AAAAH Very Happy

LOOOL Very Happy

Bin so eben ein wenig vorangekommen, habe die Container-Methode angewandt, mal schauen, ob ich so mein Ergebniss hinbekomme.

Falls ja, dann folgt auch die Erklärung nachträglich Wink

Gruß, Stony
Beitrag02.07.2012 um 11:58 (UTC)    
Titel:

ALSO =)

Das C-Menu habe ich nun so gestaltet wie ich es haben will, aber wohl oder übel ein wenig umständlich wenn ich den Code hier zeige, werden sich einige bestimmt fragen, was will der damit Very Happy

Nun denn, woran ich grad verzweifle ist der Hover-Effekt ... Dass bei Mouseover eine andere Grafik erscheint und bei Mouseout die anfangsgrafik =)


Hier mal mehr oder weniger meine Variante, wie es bis jetzt aussieht:

Code:

<style type="text/css" media="screen">
<!--

li.bg-links
{
background-image: url(http://img.webme.com/pic/s/stony-photo/cool-links.png);
background-color:none;
background-repeat: no-repeat;
width:112px;
height:27px;
border:0px solid none;
padding:0px;
}

li.bg-mitte
{
background-image: url(http://img.webme.com/pic/s/stony-photo/cool-mitte.png);
background-color:none;
background-repeat: no-repeat;
width:112px;
height:27px;
border:0px solid none;
padding:0px;
}

li.bg-rechts
{
background-image: url(http://img.webme.com/pic/s/stony-photo/cool-rechts.png);
background-color:none;
background-repeat: no-repeat;
width:112px;
height:27px;
border:0px solid none;
padding:0px;
}

li.bg-under
{
background-image: url(http://img.webme.com/pic/s/stony-photo/cool-under1.png);
background-color:none;
background-repeat: no-repeat;
width:112px;
height:27px;
border:0px solid none;
padding:0px;
}

body
{
font-family: Georgia;
font-size: 77%;
overflow: auto;
padding: 0px;
margin: 0px;
}

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

li a
{
padding-right: 0px;
padding-top: 7px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 107px;
left: 50%;
margin-left: -365px;
width: 744px;
}

.menu li
{
width: auto;
float: left;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}

.menu a
{
border: 0px solid #none;
background-color: #none;
background-image: url(xxx);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 20px;
width: 112px;
color: #4A9AF6;
}

.menu a:hover
{
background-color: #xxxxxx;
background-image: url(xxx);
color: #xxxxxx;
}

.menu a:active
{
background-color: #xxxxxx;
background-image: url(xx);
color: #34a9e0;
border-top: 0px solid none;
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6
{
font-size: 77%;
display: none;
width: 80px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a, #smenu6 a
{
background-color: #xxxxxx;
background-image: url(xxx);
font-weight: bold;
font-size: 107%;
color: #ffffff;
width: 112px;
height: 27px;
padding-top: 5px;
padding-left: 3px;
padding-right: 3px;
cursor: pointer;
}

#smenu1 a:hover, #smenu2 a:hover, #smenu3 a:hover, #smenu4 a:hover, #smenu5 a:hover, #smenu6 a:hover
{
background-color: #xxxxxx;
background-image: url(xxx);
border-top: 0px solid none;
width: 112px;
height: 27px;
}

//-->

</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">

<li class="bg-links"><a href="http://stony-photo.de.tl/Home.htm"><background-img border="0" src="http://img.webme.com/pic/s/stony-photo/cool-links.png">Startseite</a></li>

<li class="bg-mitte"><a href="http://stony-photo.de.tl/UeberMich.htm">Über Mich</a></li>

<li class="bg-mitte"> <a onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" href="javascript:void(0);">Galerie</a></a>
<ul onmouseout="cache('smenu1');" onmouseover="montre('smenu1');" id="smenu1">
<li class="bg-under"><a href="/Galerie.htm">Shootings</a></li>
<li class="bg-under"><a href="/Eventfotos.htm">Eventsfotos</a></li>
<li class="bg-under"><a href="/Verschiedenes.htm">Verschiedenes</a></li>
</ul>
</li>

<li class="bg-mitte"><a href="http://stony-photo.de.tl/Photoshoting.htm">Photoshooting</a></li>

<li class="bg-mitte"><a href="http://stony-photo.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>

<li class="bg-rechts"> <a onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" href="javascript:void(0);">Services</a></a>
<ul onmouseout="cache('smenu2');" onmouseover="montre('smenu2');" id="smenu2">
<li class="bg-under"><a href="/AGB.htm">AGB</a></li>
<li class="bg-under"><a href="/Impressum.htm">Impressum</a></li>
</ul>
</li>



Ich hoffe, dass sich jemand die mühe macht und mich da ein wenig aufklärt Smile ... Dem/Derjenigen schon jetzt ein großen Dank Smile

LG, Stony
Beiträge der letzten Zeit anzeigen:   


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