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

[Peter Parker]

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]

Du kannst der zweiten Navi eine Klasse zuweisen und die CSS-Datei entsprechend anpassen.
.<nav class="nav-2">
....
</nav>

.nav-2 ul {
....
}

 

[Peter Parker]

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:



Als HTML-Code habe ich folgendes geschrieben:

<!--        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:

.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!

 

[djheke]

HIER BIN ICH.
Ich bin im Moment auch etwas verwirrt. Eine URL wär wohl das Beste.

 

[Peter Parker]

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:

Beispiel 1

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:

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.

 

[Peter Parker]

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!