Navigation

[vega]

Hallo Forengemeinde,

ich benutze eine simple vertikale Navigation mit einem kleinen Einrück-und Farbwechseleffekt. Nichts besonderes also.

html:

Code: Alles auswählen

<div id="menu">
<ul id="navigation">
<li><a href="../portfolio/">PORTFOLIO</a></li>
<li><a href="../clients/">CLIENTS</a></li>
<li><a href="../person/">PERSON</a></li>
<li><a href="../contact/">CONTACT</a></li>
<li><a href="../imprint/">IMPRINT</a></li>
</ul>
</div>

css:

Code: Alles auswählen

ul#navigation{
   font-family:Arial,Helvetica,sans-serif;
   font-size:14px;
   list-style-type:none;
   text-align:right;
   margin-top:0px;
   vertical-align:top;
   }
ul#navigation li{
   padding-right:0px;
   }
ul#navigation li a{

   }
ul#navigation li a:hover{
   margin-right:5px;
   }

Nun fiel mir aber im Laufe der Bastelei auf, dass ich das Menü gern erweitern würde, und zwar um folgenden Effekt, bzw. folgendes Untermenü. Wenn man auf den obersten Punkt klickt (Portfolio), sollen die anderen vier Menüpunkte ausgeblendet und drei neue (unter dem ersten) angezeigt werden. Das Schema hier nur zur Veranschaulichung.

portfolio (click) --> portfolio
clients ................... fotos
person ................... comics
contact .................. designs
imprint

Die Punkte dienen nur der Veranschaulichung.

So kann man sich die neuen Punkte durchklicken und alles ansehen. Wenn man dann auf Portfolio erneut klickt, sollte wieder das erste (linke) Menü angezeigt werden.

Weiß jemand, wie das am leichtesten umzusetzen ist mit Beibehaltung der zwei Effekte? Ich bin leider nicht so der CSS-Crack, wie ihr schon an den anderen Beiträgen sehen konntet.

Vielen lieben Dank im Voraus.

[Azra]

http://tinyurl.com/3yjfkgo

[vega]

haha, danke, ich wusste nicht, dass das "pure css vertical dropdown menu" heißt.

allerding hilft mir das nicht sonderlich weiter. es gibt 9237498343 horizontale menüs und vielleicht 2983345 vertikale menüs MIT pop-out, aber irgendwie vielleicht 10 OHNE pop-out, wovon die hälfte wiederum mit js ist und die andere hälfte superkomplex. blick da nicht so durch. :-/

[Azra]

blick da nicht so durch. :-/

Auch wir mussten lernen :-/
Auch wir müssten suchen.
Auch wir erfinden das Rad nicht neu.
Du hast 3 Optionen:
- lernen
- jemanden suchen der es kann
- auf ein CMS zurückgreifen

Es klingt hart, aber du bittest einen Automechaniker auch nicht darum dir bei einem komplett Kaputten Motor zu helfen, den er dann selber neu Einbaut.

[vega]

ich habe mich da jetzt durchgebissen und noch etwas gefunden. soweit scheint es zu funktionieren. allerdings bekomme ich ein oder zwei dinge nicht ganz hin. vielleicht kann mir da noch jemand helfen?

html:

Code: Alles auswählen

<div id="menu">
<ul class="menu1">
<li class="drop"><a href="../portfolio">PORTFOLIO</a>
   <ul>
   <li><a href="fashion/">FASHION</a></li>
   <li><a href="people/">PEOPLE</a></li>
   <li><a href="scenery/">SCENERY</a></li>
   </ul>
</li>
<li><a href="../clients">CLIENTS</a></li>
<li><a href="../person">PERSON</a></li>
<li><a href="../contact">CONTACT</a></li>
<li><a class="last" href="../imprint">IMPRINT</a></li>
</ul>
</div>

css:

Code: Alles auswählen

#menu {
  width:130px;
  height:300px;
  padding:0px;
  float:left;
  margin-left:20px;
}
ul.menu1, ul ul {
   padding:0;
   border:0;
   list-style-type:none;
   height:300px;
   overflow:hidden;
   }
ul.menu1 {margin:0;   font-family:Arial,Helvetica,sans-serif;
   font-size:14px;
   list-style-type:none;
   text-align:right;
   margin-top:0px;
   vertical-align:top;
   }

ul.menu1 ul {}
ul.menu1 li {}
ul.menu1 li.drop {}
ul.menu1 li a,
ul.menu1 li a:visited {
   display:block;
   width:130px;
   text-decoration:none;
   }
ul.menu1 li a.last,
ul.menu1 li a.last:visited {
   display:block;
   width:130px;
   }
ul.menu1 li ul {
   display:none;
   }

ul.menu1 li:hover a,
ul.menu1 li a:hover {}
ul.menu1 li:hover ul, ul.menu1 li a:hover ul {
   display:block;
   height:55px;
   width:130px;
   margin-top:3px;
   }
ul.menu1 li:hover ul li a,
ul.menu1 li a:hover ul li a {
   color:#9b9b9b;
   }
ul.menu1 li:hover ul li:hover a,
ul.menu1 li a:hover ul li a:hover {
   color:#646464;
   }

bevor ich das ding umgemodellt habe, sind meine listeneinträge immer um 5 pixel nach links gerutscht, wenn ich mit der maus darüber fuhr und zwar mittels margin-right:5px. das geht aber nun nicht mehr. scheint er die rechte "kante" nicht mehr zu erkennen? dabei habe ich dem objekt ja eine width von 130 pixel gegeben (wie auch dem "menu"-div) und auch text-align:right verpasst. verstehe also nicht, wieso es nun nicht mehr einrückt bei "maus-drüber".

weiß jemand rat? danke euch im voraus.

[Azra]

listeneinträge immer um 5 pixel nach links gerutscht

Du erinnerst dich bestimmt daran was margin tut. Es setzt Abstände ausserhalb eines Containers.
Alles was innerhalb eines Containers passieren soll definierst du im jeweiligen mit padding.
Versuche bei den "li" Angaben

Code: Alles auswählen

padding-left: 5px;

.

[Azra]

Hier vielleicht hilft das zum Verständnis:

[vega]

heya, danke zunächst einmal für die grafik. die hilft sehr zwecks veranschaulichung.

allerdings hilft mir das padding bei dem problem nicht weiter. wie du sehen kannst (code und grafik), habe ich nun padding-right:5px nun bei allen li-ul-hover-einträgen eingefügt, aber es tut sich nicht. zweitweise hatte ich es mal mit 100 px probiert, nur um einen effekt zu erzielen. es scheint irgendwie so, als wird der rechte rand einfach nicht erkannt. :-/

verblüffend ist auch, dass wenn ich das padding:0px bei ul.menu1, ul ul { lösche, die ganze navigation weiter nach rechts rutscht, obwohl das feld doch auf 130 px begrenzt ist.

weißt du noch rat oder sieht jemand den fehler?

Code: Alles auswählen

ul.menu1, ul ul {
   border:0;
   list-style-type:none;
   padding:0px;
   overflow:hidden;
   }
ul.menu1 {
   font-family:Arial,Helvetica,sans-serif;
   font-size:14px;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin-top:0px;
   width:130px;
   height:300px;
   }

ul.menu1 ul {}
ul.menu1 li {}
ul.menu1 li.drop {}
ul.menu1 li a, ul.menu1 li a:visited {
   display:block;
   width:130px;
   text-decoration:none;
   }
ul.menu1 li a.last, ul.menu1 li a.last:visited {
   display:block;
   width:130px;
   }
ul.menu1 li ul {
   display:none;
   }

ul.menu1 li:hover a, ul.menu1 li a:hover {
   padding-right:5px;
   }
ul.menu1 li:hover ul, ul.menu1 li a:hover ul {
   display:block;
   height:49px;
   width:130px;
   padding-right:5px;
   }
ul.menu1 li:hover ul li a, ul.menu1 li a:hover ul li a {
   color:#9b9b9b;
   }
ul.menu1 li:hover ul li:hover a, ul.menu1 li a:hover ul li a:hover {
   color:#646464;
   padding-right:5px;
   }


[Azra]

Du hast das <ul> blockiert.

Code: Alles auswählen

ul.menu1 li a, ul.menu1 li a:visited

Ist ohne HTML Code schwer zu sagen aber ich denke es sollte alles funktionieren wenn du dort display:block; rauß nimmst.
Falls das im Submenu auch passieren sollte und durch das fehlende blockieren die Navigation falsch angezeigt wird benötigen wir den HTML Code dazu.

[vega]

jeppa, das war es. toll, danke dir. wenn man die anderen display:block heraus nimmt, funzt das menü nicht mehr, aber bei dem geht es. vielen dank.

jetzt gibt es nur noch eine unschöne sache. leider wird das sub-menü, das herausrutscht auch eingerückt, bevor man mit der maus überhaupt darüber fährt, da es wahrscheinlich als aktiv gilt (von portfolio her), siehe screenshot.

kann man das eventuell noch verbessern? ich füge mal screenshot, html und css hinzu.

der portfolio-button ist zwar der einzige von den fünfen, der ein sub-menü hat, aber es würde dennoch nicht schaden, wenn es halt "sauber" dargestellt wird.

html

Code: Alles auswählen

<div id="menu">
<ul class="menu1">
<li class="drop"><a href="../portfolio">PORTFOLIO</a>
   <ul>
   <li><a href="fas.htm">FASHION</a></li>
   <li><a href="peo.htm">PEOPLE</a></li>
   <li><a href="sce.htm">SCENERY</a></li>
   </ul>
</li>
<li><a href="../clients">CLIENTS</a></li>
<li><a href="../person">PERSON</a></li>
<li><a href="../contact">CONTACT</a></li>
<li><a class="last" href="../imprint">IMPRINT</a></li>
</ul>
</div>

css

Code: Alles auswählen

ul.menu1, ul ul {
   border:0;
   list-style-type:none;
   overflow:hidden;
   padding:0;
   }
ul.menu1 {
   font-family:Arial,Helvetica,sans-serif;
   font-size:14px;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin-top:0px;
   width:130px;
   height:300px;
   }

ul.menu1 ul {}
ul.menu1 li {}
ul.menu1 li.drop {}
ul.menu1 li a, ul.menu1 li a:visited {
   width:130px;
   text-decoration:none;
   }
ul.menu1 li a.last, ul.menu1 li a.last:visited {}
ul.menu1 li ul {
   display:none;
   }
ul.menu1 li:hover a, ul.menu1 li a:hover {
   padding-right:5px;
   }
ul.menu1 li:hover ul, ul.menu1 li a:hover ul {
   display:block;
   height:49px;
   width:130px;
   }
ul.menu1 li:hover ul li a, ul.menu1 li a:hover ul li a {
   color:#9b9b9b;
   }
ul.menu1 li:hover ul li:hover a, ul.menu1 li a:hover ul li a:hover {
   color:#646464;
   }

... und noch eine frage, damit ich sie nicht später noch stellen muss, aber ich glaube, die antwort lautet "nein": wenn man das sub-menü offen hat und davon einen link anklickt, wird ja ein neues dokument geladen. ist es möglich, dass bei diesen neugeladenen dokumenten das sub-menü noch offen ist?

im moment funzt es ja mit hover und ist dann immer gleich wieder zu. das würde vermutlich nur mit js gehen, was ich im menü vermeiden möchte.

danke euch mal wieder vorab.

[Azra]

Zu Frage 1:
Schätze das sollte funktionieren wenn du bei

Code: Alles auswählen

ul.menu1 li ul

padding-left: 5px;
Ja, left

Zu Frage 2:
Schwer ist das ansich nicht. Eine simple Ajax Funktion mit JavaScript habe ich hier herumliegen.
Binde das hier in den <head> bereich unterhalb des CSS-Bereiches:

Code: Alles auswählen

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
   $j(document).ready(function(){
            $j("a").click(function(){
               $j.ajax({
                  url: $j(this).attr("href"),
                  success: function(response) {
                  $j("#content").html(response);
                  }
               });
         return false;
   });
});
</script>


("a"): Hier definierst du was auf die Funktion reagieren soll, mit a sind sämtliche Links betroffen.
("#content"): Hier definierst du wo der Inhalt geladen werden soll, n diesem fall ist es eine ID mit dem namen Content. Am besten ist es ein Container zu verwenden.
Den Rest lässt du sein wie er ist

In deine Seite schreibst du nun also den ganzen Inhalt deiner Startseite.
Die anderen Seiten benötigen kein HTML gerüst mehr, im Prinzip kannst du nur "aildfgbialfbg" schreiben und als htm, html oder php Seite abspeichern. Es ist ebenfalls nicht nötig CSS in eine neue Seite ein zu pflegen.

[vega]

haha, k, shit, darauf hätte ich auch selber kommen können. also, kleiner trick quasi mit dem padding-left:5px. danke dir.

zum anderen: hilfe, klingt kompliziert. ich probiere es erst einmal ohne ajax/js. wenn es den usern nicht gefällt, überlege ich mir deinen vorschlag. danke auch dafür.

jetzt fehlt nur noch eine sache und dann bin ich fertig, glaube ich, aber das schreibe ich in einen anderen thread.