Zwei Navigationen (mittels ul - li) auf einer html-Seite realisieren?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Peter Parker

Neues Mitglied
5 Dezember 2018
4
0
1
38
Hallo zusammen,

ich stehe vor dem Problem, dass ich gerne zwei Navigationselemente auf einer Seite realisieren möchte.

Dazu habe ich bereits beide Navigationen schon fertig geschrieben. Separat voneinander funktionieren diese auch.
Wenn ich beide css.-Dateien nun aber gemeinsam einbinde und adressiere, wird natürlich die erste css-variante genommen und auf die zweite ebenfalls angewendet.

Wie kann ich die zweite CSS-Datei anpassen, damit diese eigenständig erkannt und interpretiert wird?


Ich danke euch im voraus für eure Hilfe,

Gruß, Peter!
 

djheke

Aktives Mitglied
8 Februar 2012
922
84
28
Du kannst der zweiten Navi eine Klasse zuweisen und die CSS-Datei entsprechend anpassen.
.<nav class="nav-2">
....
</nav>

.nav-2 ul {
....
}
 

Peter Parker

Neues Mitglied
5 Dezember 2018
4
0
1
38
Hallo djheke,

danke für deine Hilfestellung!

Ich bin autodidaktisch bewandert in html und css und finde mich i.d.R. relativ gut zurecht, allerdings beisse ich mir an der Formulierung von Klassen die Zähne aus und stehe hier ein wenig auf dem Schlauch.

Exemplarisch sieht das ganze wie folgt aus:

5107

Als HTML-Code habe ich folgendes geschrieben:

HTML:
<!--        Sidebar links                    -->
    <div class="column navi">
        <div class="sidebar">
            <section>
            <ul class="sidebar-menu">
        


    <li class="sidebar-header">Kategorie 1</li>
    <li>
        <a href="#">
            <i class="fa fa-share"></i> Thema 1<i class="fa fa-angle-down pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
            <li><a href="#"><i class="fa fa-circle-o"></i> U.-Thema 1</a></li>
            <li><a href="#"><i class="fa fa-circle-o"></i> U.-Thema 2</a></li>       
            <li>
                <a href="#"><i class="fa fa-circle-o"></i> U.-Thema 3<i class="fa fa-angle-down pull-right"></i></a>
                <ul class="sidebar-submenu">
                    <li><a href="#"><i class="fa fa-circle-o"></i> U.U.-Thema 1</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> U.U.-Thema 2</a></li>
                    <li><a href="#"><i class="fa fa-circle-o"></i> U.U.-Thema 3</a></li>
                </ul>
            </li>
            <li><a href="#"><i class="fa fa-circle-o"></i> U-Thema 4</a></li>
        </ul>
    </li>   
    
    </ul>
  </section>

  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="struktur/js/sidebar.js"></script>
  <script>
    $.sidebarMenu($('.sidebar'))
  </script>

</div>
</div>
Die dazugehörige CSS-Datei sieht wie folgt aus:

CSS:
.animate-menu-push {
left: 0;
position: relative;
transition: all 0.3s ease;
}


.animate-menu-push.animate-menu-push-right {
left: 200px;}



.animate-menu-push.animate-menu-push-left {
left: -200px;
}


.animate-menu {
position: fixed;
top: 0;
width: 200px;
height: 930px;
transition: all 0.3s ease;
}


.animate-menu-left {
left: -200px;
}


.animate-menu-left.animate-menu-open {
left: 0;
}


.animate-menu-right {
right: -200px;
}


.animate-menu-right.animate-menu-open {
right: 0;
}


.sidebar-menu {   
list-style: none;
margin: 0;
padding: 0;
/* background-color: #222d32; */
background-color: #40506C;}


.sidebar-menu > li {
position: relative;
}


.sidebar-menu > li > a {
padding: 12px 5px 12px 0;
display: block;
border-left: 3px solid transparent;/*
color: #b8c7ce; */ color: #ffffff;
text-decoration: none;
}


.sidebar-menu > li > a > .fa {
width: 20px;
}


.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
color: #fff;
 background: #71a1d6;
 border-left-color: #ff0000;
}

.sidebar-menu > li .label,
.sidebar-menu > li .badge {

margin-right: 20px;
}


.sidebar-menu li.sidebar-header {
padding: 10px 25px 10px 15px;
 font-size: 14px;
color: #000;
font-weight: bold;
background: #ddd;
}


.sidebar-menu li > a > .fa-angle-down {
width: auto;
height: auto;
padding: 0;
margin-right: 5px;
margin-top: 3px;
}


.sidebar-menu li.active > a > .fa-angle-left {
transform: rotate(-90deg);
}


.sidebar-menu li.active > .sidebar-submenu {
display: block;
}

.sidebar-menu a {
color: #b8c7ce;
text-decoration: none;
}


.sidebar-menu .sidebar-submenu {
display: none;
list-style: none;
padding-left: 5px;
margin: 0 1px;
background: #a5c9f2;
}


.sidebar-menu .sidebar-submenu .sidebar-submenu {
  padding-left: 10px;
}
 

.sidebar-menu .sidebar-submenu > li > a {
  padding: 5px 5px 5px 15px;
  display: block;
  font-size: 14px;
  color: #000000;
  text-decoration: none;
}
 

.sidebar-menu .sidebar-submenu > li > a > .fa {
width: 20px;
}


.sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
width: auto;
}


.sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
color: #fff;
}



.sidebar {
  width: 200px;
 z-index: 10;
 height: 972px;
 overflow-x: hidden;
 overflow-y: hidden; position: absolute;
  padding: 38px 0 0 0;
  background-color: #40506C;
}


Wärst du so freundlich, mir die ersten Schritte zu zeigen, so dass ich daraus dann alles weitere ableiten kann?

Ich danke dir!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.277
263
83
66
Wo ist djheke?
Wenn ich mir das Ganze ansehe, kommen folgende Fragen auf:
  • Da sehe ich nur ein Menü?
  • Die Klassen im CSS finde ich im HTML nicht wieder. Ich vermute, dass sie durch das Javascript in sidebar.js gesetzt werden?
Am besten wäre es, wenn Du es online hättest und die URL posten würdest, dann könnte man es sich im Zusammenhang und in Aktion ansehen.
 

Peter Parker

Neues Mitglied
5 Dezember 2018
4
0
1
38
Hallo ihr beiden,

Danke für euer Engagement.
Möglicherweise habe ich mich auch verhauen...

Unter folgendem Link habe ich euch exemplarisch beide Navigationen eingebunden:


Hier wird die TopNavigation mit Beispiel A und Beispiel B akkurat angezeigt und die Struktur auf der linken Seite unter Kategorie 1, Thema 1, U-Thema 1.. etc nicht richtig interpretiert.


Unter Beispiel 2:


Habe ich ausschließlich die Einbindung der Topnavigation und den dazugehörigen HTML-Code entfernt und die Seitennavigation mit Thema 1, etc.. wird richtig dargestellt.


Zum eigenen Ausprobieren habe ich die wenigen Dateien auch einmal gezippt und euch bereit gestellt.
 

Anhänge

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.277
263
83
66
Ja, ich erkenne da einige kleine Unsauberkeiten. Um diese zu beheben, musst Du nur die Empfehlung von djheke umsetzen: Eine Klasse hat die Topnav ja schon. Du brauchst nur allen Selektoren in navtop.css diese Klasse voranzustellen, also z. B.:
CSS:
.topnav {
    /* height: 65px; */
    overflow: hidden;
    background-color: #40506C;
    z-index: 10;
}

.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 210px;
    overflow: hidden;
    background-color: #40506C;
    z-index: 10;
}

.topnav li {
    float: left;
}
/* usw. */
Nebenbei gesagt, nicht besonders vorbildlich diese Nav, einmal weil pauschal und ohne Eingrenzung Regeln für die Listenelemente zugewiesen werden und zum anderen weil das veraltete float verwendet wird.
 

Peter Parker

Neues Mitglied
5 Dezember 2018
4
0
1
38
Vielen herzlichen Dank für eure Hilfestellung.

Ich bin mir der Unsauberkeiten bewusst, auch des floates und hätte lieber mit flexbox gearbeitet.
Die Restriktionen des darstellenden OS lassen mir aber leider keine andere Wahl.

Ich danke euch vielmals!

Mit besten Grüßen,
Peter!
 
Werbung:

Latest posts