Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag20.11.2009 um 20:15 (UTC)    
Titel: Design CSS : Navigation Oben

Kein Drop Down Menü oder so.

Einfach nur ein Menü, über das man drüber fährt das dann nen Hover Effekt macht !

Die Menüpunkte sollen halt solange wie die Menüwörter sein (Also verschieden lang)

Hat da jemand nen Code ?
Danke im Voraus Mr. Green
______________
Ihr wollt wrestlen ? Auf der WAE seid ihr richtig !
Beitrag20.11.2009 um 20:56 (UTC)    
Titel:

Schau auf meiner Seite:
Auf meiner Seite ist alles mit Legende und Erklärung.

http://area4webmasters.de.tl/Navigation-oben.htm

Und hier poste ich dir den Code:


Code:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<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>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>




Hoffe es hilft Very Happy
______________
Bei mir gibts Vorlagen, Grafiken, Tutorials und Codes bis zum Ende Very Happy




Beitrag20.11.2009 um 21:22 (UTC)    
Titel:

Den Code finde ich jetzt etwas kompliziert Very Happy machs doc einfach so:

CSS-Code ohne Style Tags:
Zitat:
.menu{
background-color:#000000;
height:30px;
width:160px;
float: left;
color:#ffffff;}

.menu:hover{
background-color:#CCCCCC;
height:30px;
width:160px;
float: left;
color:#ffffff;}


Dann dahin, wo das Menü hin soll:
Zitat:
<div class="menu">Menüpunkt 1</div><div class="menu">Menüpunkt 2</div>
usw...
______________
alles für den Gamer

Aktuellste Themen: Entlich gibt es auch ein Forum! einige Tage Arbeit zahlen sich aus.
Game tools - diese Helfer dürfen nicht fehlen

Suchen noch Partner (PN)
Beitrag21.11.2009 um 06:36 (UTC)    
Titel:

Wird nicht gut funktionieren.
Du brauchst den vollständigen Code.
Ausserdem ist ja alles erklärt.
Und den Code benutze ich auch bei andern Websites!
______________
Bei mir gibts Vorlagen, Grafiken, Tutorials und Codes bis zum Ende Very Happy




Beitrag21.11.2009 um 12:09 (UTC)    
Titel:

Natürlich wird das funktionieren. Das erstellt einfach einen Container mit text drin, der beim onmouseover die Farbe wechselt.

--Matz

EDIT: Auf meiner Seite hab ich die Navi genau so gemacht und das funktioniert super
______________
alles für den Gamer

Aktuellste Themen: Entlich gibt es auch ein Forum! einige Tage Arbeit zahlen sich aus.
Game tools - diese Helfer dürfen nicht fehlen

Suchen noch Partner (PN)


Zuletzt bearbeitet von gamesframe am 21.11.2009, 13:10, insgesamt einmal bearbeitet
Beitrag08.12.2009 um 19:43 (UTC)    
Titel:

gamesframe hat Folgendes geschrieben:
Den Code finde ich jetzt etwas kompliziert Very Happy machs doc einfach so:

CSS-Code ohne Style Tags:
Zitat:
.menu{
background-color:#000000;
height:30px;
width:160px;
float: left;
color:#ffffff;}

.menu:hover{
background-color:#CCCCCC;
height:30px;
width:160px;
float: left;
color:#ffffff;}


Dann dahin, wo das Menü hin soll:
Zitat:
<div class="menu">Menüpunkt 1</div><div class="menu">Menüpunkt 2</div>
usw...


Das funktioniert gut. Ich frage mich nur, wie man dann die Navi positionieren kann:

Habe es so gemacht:

.menu{
background-color:#000000;
position: absolute;
top:500px;
left:200px;
height:30px;
width:160px;
float: left;
color:#ffffff;}

.menu:hover{
background-color:#CCCCCC;
position: absolute;
top:500px;
left: 200px;
height:30px;
width:160px;
float:left;
color:#ffffff;}

und bei Text über dem Design:

<div class="menu">Menüpunkt 1</div><div class="menu">Menüpunkt 2</div>

und sieht so aus: www.lunas-kitten.de.tl

Danke
______________
Mit besten Grüßen Marco
www.harley-motorcycles.de

Beitrag13.12.2009 um 19:47 (UTC)    
Titel:

Gib dir recht Area4Webmaster

Der Code


Code:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #00CCFF;
background-image: url(URL);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 160px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF; }
//-->
</style>

<!-- Anfang des Scriptes -->
<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>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Hauptmenü 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="Unterlink 1.1">Untermenü 1.1</a></li>
<li><a href="Unterlink 1.2">Untermenü 1.2</a></li>
<li><a href="Unterlink 1.3">Untermenü 1.3</a></li>
<li><a href="Unterlink 1.4">Untermenü 1.4</a></li>
<li><a href="Unterlink 1.5">Untermenü 1.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Hauptmenü 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="Unterlink 2.1">Untermenü 2.1</a></li>
<li><a href="Unterlink 2.2">Untermenü 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Hauptmenü 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="Unterlink 3.1">Untermenü 3.1</a></li>
<li><a href="Unterlink 3.2">Untermenü 3.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Hauptmenü 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="Unterlink 4.1">Untermenü 4.1</a></li>
<li><a href="Unterlink 4.2">Untermenü 4.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Hauptmenü 5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="Unterlink 5.1">Untermenü 5.1</a></li>
<li><a href="Unterlink 5.2">Untermenü 5.2</a></li>
</ul>
</li>
</div>



ist der Beste!

MFG neetpro.de.tl Very Happy
Beiträge der letzten Zeit anzeigen:   


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