Neues Menü für meine Website

**d3x84** · 21.10.2011, 05:51

Hi zusammen,
wie in diesem Thread beschrieben,
suche ich nach einer neuen Navigation und benötige ein wenig Hilfe.
Durch das suchen n der community sind mir schon einige erweiterungen wie megamenü aufgefallen.
(ich muss immerwieder bemerken das die community hier sehr hilfsbereit und vorallem kompetent ist

)
Nach ein wenig googeln und ein wenig -> "fotoladen" <- habe ich auch nun einen entwurf wie das ganze aussehen soll, weiss aber noch nicht genau wie ich das umsetzen kann...
(also das horizontale menü + subemnü links + megamenü usw)
meine aktuelle Website ist: http://www.reneboehres.de

hier ein paar screenshots wie das aussehen soll bzw wie meine Idee ist wie es in zuzkunft aussehen könnte
für vorschläge was ich besser machen kann bin ich natürlich immer gern zu haben

Edit: Die textpunkte "IT-Service für unternehmen" etc. im unteren rechten content bereich (ganz unten rechts) ist ein überbleibsel vom basteln mit dem bild einfach ignorieren

Meiner bescheidenen Meinung nach sollte evtl das linke "Navigation" menü auch ganz rausfliegen um die übersichtlichkeit zu verbessern
und den nicht so versierten geschäftsmann beim surfen nicht zu verwirren... so sollte die übersichltichkeit stark verbessert werden
auch wenn die navigation so etwas komplizierter wird...

Wenn nichts geklickt ist:

Bei Onmouseover (man beachte den grünen teil innerhalb des aufgepoppten menüs... da soll sich die mouse befinden + ein text zu dem bereich wo sich die mouse befindet
+ ein passendes schickes bild zu dem bereich über dem die mouse ist oder ein genereller text + bild je nachdem wie das machbar ist

evtl könnte man auch die facebook links über die navigation bauen so das sie immer sichtbar sind...

schick wäre auch ein scrolleffekt wie auf dieser website:
http://www.hannover96.de/CDA/aktuelles.html

ist das machbar?

ich bitte um meinungen anregungen und vorallem ratschläge und hilfe wie das umsetzbar ist vielen dank und gruß

**Vollpfosten** · 21.10.2011, 06:27

Momentan würde doch ein einfaches Drop-Down-Menü ohne zusätzliche linke Navigation vollkommen reichen, deine gesamte Navigation geht nicht über eine Subebene hinaus und zusätzliche Informationen mit Text und Bild bei Mousover halte ich auch für "overpowered" (da hättest du vermutlich schon fast den gesamten Inhalt der verlinkten Seite in der Navigation). Sehe einfach keinen Grund für eine "aufgeblähte" Mega-Navigation.

**netnite** · 21.10.2011, 08:04

Das Megamenü ist definitiv das Falsche. Dir wurde schon der Tip in einem anderen Thread gegeben nach dem Stichwort Suckerfish zu suchen! Dort findest du dann auch eine Anleitung wie du das einrichtest.

**d3x84** · 27.10.2011, 05:16

mein problem ist weniger die einrichtung der menüs sondern eher das css...
bin nicht gerade der held ins css und benötige hilfe dabei
ich will mich auch nicht tagelang nur mit css beschäftigen

vom prinzip her hat ja meine website schon ein menü ich müßte ja wohl nur
das css anpassen wenn ich eher schlechte doku ( z.B. http://de.contaowiki.org/Suckerfishalternative ) zu diesem thema richtig verstanden habe

**Vollpfosten** · 27.10.2011, 05:40

In der Anleitung ist doch schon alles vorgegeben: ein wenig copy&paste, evtl. den einen oder anderen Selektor anpassen und fertig ist der Kram. Da stellt sich für mich wirklich die Frage, wie du auf deiner Homepage Webdesign anbieten kannst.

**netnite** · 27.10.2011, 08:37

Hier macht sich der Bock zum Gärtner.

**d3x84** · 28.10.2011, 06:59

ganz einfach ein geschäftspartner von mir ist programmierer

der macht aber meistens ganze portalentwicklungen

er hat schon zb für einen kunden der ein "nicht jungendfreies" portal betreibt eine youtube ähnlich struktur entwickelt.
inkl. live übertragung uploads etc.
das ganze system ist skalierbar und "cloud basiert" nach dem motto "unsere server sind ausgelastet" -> dann mal schnell 10 neue her
und selbst für so "pille palle" kram sind bei ihm schnell mal gut dreistellige zahlen fällig...

das "original" meiner site war ein template das ich in detektivischer arbeit angepasst habe

**d3x84** · 28.10.2011, 07:05

Zitat von Vollpfosten

In der Anleitung ist doch schon alles vorgegeben: ein wenig copy&paste, evtl. den einen oder anderen Selektor anpassen und fertig ist der Kram. Da stellt sich für mich wirklich die Frage, wie du auf deiner Homepage Webdesign anbieten kannst.

außerdem hätte ich gern ausfahrende menüs so mootools nav mäßig...
das ganze muss ich natürlich farblich anpassen was natürlich nicht das problem ist...
aber bei zig browsern und versionen da korrekte css zu machen die in jedem browser gleich aussehen
ist für "schrauber" wie mich auch net einfach

**netnite** · 28.10.2011, 08:14

Dann nimm einen Dienstleister in Anspruch der dir das einbaut. Dann musst du aber einfach Geld in die Hand nehmen und dann fallen sehr schnell "dreistellige" Beiträge an.

**d3x84** · 29.10.2011, 06:27

nachdem ich heute nacht nich schlafen konnte hab ich mich dazu durchgerugen es zu basteln

habe nur noch folgende probleme...

die visited sachen werden in den css des tutorials nicht erwähnt wie kann ich die einbauen

also zb mit .mod_navigation a werden ja die links allgemein festgelegt
wie funktioniert das dann mit den active oder visited sachen?
.mod_navigation a.active?

wenn ich per hover auf das menü zeige,
ist das aufklappmenü um einige pixel nach rechts versetzt
im moment des klickens versetzt es das menü kurz nach links...
why?

wie bekomme ich die höhe der einzelnen elemente kleiner bzw zumindest die des ersten levels?

Code:

.mod_navigation
{
    height:300px;
    left:-25px;
    top:167px;
    position:absolute;
    overflow:visible;
    padding-left:0;
    z-index:999;
}
.mod_navigation a
{
    padding-left:5;
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
    text-decoration: none;
}
.mod_navigation p
{
    margin:0;
    padding:0;
}
.mod_navigation ul
{
    list-style-type:none;
}
.mod_navigation li
{
    width:185px;
    position:relative;
    float:left;
    background-color:#6dbbbe;
    border-right:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-left:0px solid #ffffff;
    line-height:35px;
}
.mod_navigation li ul
{
    left:-1px;
    right:0pxpx;
    top:36px;
    position:absolute;
    display:none;
}
.mod_navigation li ul ul
{
    left:186px;
    top:0;
    position:absolute;
}
.mod_navigation li:active ul
{
    padding-left:5px;
    font-weight:bold;
    color:#123456;
}
.mod_navigation li:hover ul
{
    display:block;
}
.mod_navigation li:hover
{
    background-color:#999999;
}
.mod_navigation ul li:hover ul ul
{
    display:none;
}
.mod_navigation ul ul li:hover ul
{
    display:block;
}

screenie.jpg

danke