Zusätzliche Navigationsebene

Antworten
#1
28.01.2016 16:54
avatar  Amy
#1
Am
Amy

Liebes Forum,

bekanntermaßen gibt es bei Jimdo ja nur die Möglichkeit, drei Ebenen in der Navigation zu erstellen. Habt ihr vielleicht einen Trick auf Lager, wie sich eine vierte Ebene einfügen lässt? Würde gerne eine Unterseite noch weiter gliedern.

Danke!
LG
Amy


 Antworten

 Beitrag melden
#2
29.01.2016 10:15 (zuletzt bearbeitet: 29.01.2016 14:47)
avatar  az_
#2
avatar
az_

...nur über eine eigene Navigation und mit versteckten Seiten. Beispiel sh.: http://forum-images.jimdo.com/test/navigation/?




LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Bildanhänge

 Antworten

 Beitrag melden
#3
29.01.2016 14:01
avatar  Amy
#3
Am
Amy

Hallo @az_ ,

danke für die schnelle Antwort. Aber kannst du mir vielleicht ein bisschen genauer sagen, was ich machen muss? Wenn ich den Code einfüge,, passiert gar nix (bin eher ein Laie).
Danke für die Geduld!

LG
Amy


 Antworten

 Beitrag melden
#4
29.01.2016 14:48 (zuletzt bearbeitet: 29.01.2016 15:19)
avatar  az_
#4
avatar
az_

klick hier: http://forum-images.jimdo.com/test/navigation/? und lies...

;) LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#5
29.01.2016 15:21
avatar  Amy
#5
Am
Amy

Habs gelesen. Wenn ich einfach beide Codes eingebe, passiert nix. Also mache ich offensichtlich was falsch...

LG
Amy


 Antworten

 Beitrag melden
#6
29.01.2016 16:58 (zuletzt bearbeitet: 29.01.2016 19:52)
avatar  az_
#6
avatar
az_

Hi @Amy

...auf welcher Seite hast Du das Problem? Schick uns mal eine URL (http://...)

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#7
29.01.2016 17:01
avatar  Amy
#7
Am
Amy

www.arts4.de

Hätte da gern noch einen zusätzlichen Navigationsunterpunkt

LG


 Antworten

 Beitrag melden
#8
29.01.2016 20:36 (zuletzt bearbeitet: 29.01.2016 20:39)
avatar  az_
#8
avatar
az_

Hi @Amy

...ich verstehe nicht ganz - wo hättest Du gern noch einen zusätzlichen Navigationsunterpunkt?

...soll es so aussehen?



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Bildanhänge

 Antworten

 Beitrag melden
#9
30.01.2016 15:32
avatar  Amy
#9
Am
Amy

ja, genau so soll es aussehen! :)


 Antworten

 Beitrag melden
#10
30.01.2016 17:28
avatar  az_
#10
avatar
az_

...nun, das mit dem Unterstrich bei der aktuellen Auswahl ist etwas tricky, aber wenn du darauf verzichten kannst nimm einfach den Code s.o. und belege die Listeneinträge mit den Links Deiner versteckten Unterseiten.

Das Einzige, was du noch ändern musst, ist die Textfarbe (color: white) und die Farbe des Hintergrundes (black). Und die border muss weg (none)
Was mich an die Wende '89 erinnert: "die Mauer muss weg!"

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#11
30.01.2016 18:20 (zuletzt bearbeitet: 30.01.2016 18:37)
avatar  Amy
#11
Am
Amy

Danke für die Erklärung, aber irgendwas mache ich immer noch falsch. Ich kombiniere die beiden Codes auf der von dir genannten Seite und gebe als URL diejenige Seite an, der noch eine Navigationsebene (Seite 1-4) hinzugefügt werden soll.

Der Code sieht dann bei mir so aus:

HTML (Text-Element)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 

<div class="h-menu">
 
<ul>
 
<li>
<a href="http://www.arts4.de/art/paintings/oblongs/" title="Navigation">
<span style="">SEITE 1</span>
</a>
</li>
 
<li>
<a href="http://www.arts4.de/art/paintings/oblongs/" title="Navigation">
<span style="">SEITE 2</span>
</a>
</li>
 
<li>
<a href="http://www.arts4.de/art/paintings/oblongs/" title="Navigation">
<span style="">SEITE 3</span>
</a>
</li>
 
<li>
<a href="http://www.arts4.de/art/paintings/oblongs/" title="Navigation">
<span style="">SEITE 4</span>
</a>
</li>
 
</ul>
 
</div>
 

 




CSS-Code (Head-Bereich)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<style type="text/css">
/*<![CDATA[*/
/*eigene horizontale Navigation (.h-menu)
-----------------------------------------------------*/
.h-menu ul {
margin:5px;
padding:5px;
list-style:none;
display:inline
}
.h-menu {/*float:right;*/
width:350px;
margin: 0 auto;
}
.h-menu li {
display:inline-block
}
.h-menu a {
text-transform: uppercase;
text-decoration: none;
border: none;
/*  border-bottom: 2px solid transparent;*/
font-size: 14px;
color: #FFF;
display: block;
min-width: 35px;
padding: 10px;
background-color: black;
margin: 5px 0;
border-radius: 5px;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease
}
.h-menu .current a, .h-menu a:hover {
border-bottom:2px solid #000;
background-color: #FFF;
color: white;
}
/*]]>*/
</style>
 



Aber da tut sich nix. Hast du noch einen Tipp? :)

LG!


 Antworten

 Beitrag melden
#12
30.01.2016 18:35 (zuletzt bearbeitet: 30.01.2016 18:44)
avatar  az_
#12
avatar
az_

ja. Ich hab den Code in Deiner Nachricht etwas verändert. Der CSS-Code gehört in den Head-Bereich, nicht in den html-Bereich des Text-Elementes. Versuch mal nochmal.

...oder nimm gleich die Dateien von http://forum-images.jimdo.com/forum/navigation/, die ich da für Dich hingelegt hab ;-) :



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Bildanhänge

 Antworten

 Beitrag melden
#13
31.01.2016 10:41
avatar  Amy
#13
Am
Amy

Danke, habs jetzt endlich gecheckt, we ich es machen muss. Aber ganz passt es noch nicht, siehe Bild. Irgendwie ist es verschoben und schneidet die anderen Ebenen ab...?

LG


 Antworten

 Beitrag melden
#14
31.01.2016 22:50 (zuletzt bearbeitet: 31.01.2016 22:51)
avatar  az_
#14
avatar
az_

...tausch das CSS-skript aus mit dem hier:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<style type="text/css">
/*<![CDATA[*/
    
    @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic|Kelly+Slab);
    @import url("https://fonts.googleapis.com/css?family=Armata%3Aregular%7CJulius%20Sans%20One%3Aregular%7CJulius%20Sans%20One%3Aregular%7CJulius%20Sans%20One%3Aregular%7CJulius%20Sans%20One%3Aregular%7CDays%20One%3Aregular&subset=latin");
    
    /*eigene Navigation (schwarz)
    -----------------------------------------------------*/
    .h-menu1 {position: absolute; 
        width:1100px; 
        margin: 0 auto; 
        background-color: #000;
        margin-top:-80px;        /*Abstand oben*/
    }
    .h-menu1 ul {
        margin:5px;
        padding:5px;
        list-style:none;
        display:inline
    }
    .h-menu1 li {
        display:inline-block
    }
    .h-menu1 a {
        font-family: "Julius Sans One",sans-serif,"google";
        font-size:18px;
        font-weight: bold;
        text-align:center;
        text-transform: uppercase;
        text-decoration: none;
        color: #ccc;
        display: block;
        padding: 5px 10px 5px ;
        background-color: #000;
        margin: 0px 12px 10px ;          /*Ränder Nav-Balken*/
    }
    .h-menu1 .current a, .h-menu1 a:hover {
        text-decoration: none;
        background-color: #000;
        color: white;
        border-bottom: 2px solid white;
        margin: 0px 12px 8px;          /*Ränder Nav-Balken*/
    }
 
/*]]>*/
</style>
 




...und spiel ein bisschen mit den Werten. (zB margin-top)
LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#15
01.02.2016 16:35
avatar  Amy
#15
Am
Amy

Jetzt ist es zum Glück nicht mehr abgeschnitten, aber zu weit links, also nicht zentriert ausgerichtet wie die restliche Navigation.
Anhand Margin lässt sich dabei nichts verändern...

LG
Amy


 Antworten

 Beitrag melden
#16
04.02.2016 13:45
avatar  az_
#16
avatar
az_

...auch, wenn Du die Breite (width) von .h-menu1 veränderst?


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!