ICONS für Hauptmenü / Seitenmenü

Harald-RS · Mar 9th 2018

Hallo Leute ich habe bei mir das Hauptmenü an die Seite gepackt.

Nun möchte ich dafür Icons machen wo dann nur der Name beim drauf zeigen der Maus erscheint.

So sieht es im Moment bei mir aus:

Wie kann ich das am besten bewerkstelligen

JayOnRails · Mar 9th 2018

Ggf. hilft das hier?

https://community.woltlab.com/thread/266718-navigations-icon-ändern/?postID=1665758#post1665758

Harald-RS · Mar 9th 2018

JayOnRails

Habe ich probiert klappt aber nicht.

Hier der Link zu der entsprechenden Domain.

https://tourneo-forum.de/cms

Grischabock · Mar 9th 2018

Quote from Harald-RS

Habe ich probiert klappt aber nicht.

Hast du die Änderungen (wiki) vorgenommen? Das musst du an deinen Menüpunkt anpassen.

Code

.pageSidebarMenu .mainMenu .boxMenu > li > a[href*="wiki"] .icon::before {
    content: "\f266";
}

ReeN · Mar 9th 2018

Erstmal brauchst du folgendes:

CSS

.mainMenu .boxMenu > li > a::before {
    font-family: FontAwesome;
}

Und dann für jeden Menüpunkt folgenden Code mit angepasstem href:

CSS

.mainMenu .boxMenu > li > a[href*="lexicon"]::before {
    content: "\f266";
}

Harald-RS · Mar 9th 2018

Bei mir steht es so:

CSS

.mainMenu .boxMenu > li > a[href*="übersicht"] .icon::before {
    font-family: FontAwesome;
    font-weight: normal !important;
    font-style: normal !important;
    text-align: center;
    content: "\f086";
}

ReeN · Mar 9th 2018

Dürfte so aber eigentlich gar nicht gehen, da das .icon bei dir gar nicht vorhanden ist.

Harald-RS · Mar 9th 2018

Ok da war der Fehlerteufel drinnen.

Gut jetzt werden die ICON davor angezeigt nur wo finde ich die ganzen Nummern für die Bilder.

Ich such mir gerade dafür nen Wolf.

Achja und wie stelle ich es nun noch an das der Text erst angezeigt wird wenn man drüber fährt mit der Maus?

Devon · Mar 9th 2018

Quote from Harald-RS

Gut jetzt werden die ICON davor angezeigt nur wo finde ich die ganzen Nummern für die Bilder.

Meinst du "Code" für die FA Icons? Hier:

https://fontawesome.com/

benzel · Mar 9th 2018

Quote from Harald-RS

Gut jetzt werden die ICON davor angezeigt nur wo finde ich die ganzen Nummern für die Bilder.

https://fontawesome.com/icons?d=gallery -> zB https://fontawesome.com/icons/500px?style=brands und da unter dem Icon die zweite Box (hier: f26e)

--8<--

Zusatz: Der Backslash bei "Contet" muss aber erhalten bleiben ( content: "\f26e";)

Harald-RS · Mar 10th 2018

SO die Icons sind nun alle vorhanden.

Jetzt müsste ich nur noch es hinbekommen das die Schrift dann nur erscheint wenn man mit hover drüber fährt und wenn es aktiv ist.

ReeN · Mar 10th 2018

Versuch es mal so:

CSS

.mainMenu .boxMenu > li:not(.active):not(:hover) > a > span {
    display: none;
}

Harald-RS · Mar 10th 2018

So jetzt sieht es schon besser aus nur wenn ich nun über den Aktiven Reiter fahre wird zwar die Schrift angezeigt aber der Hintergrund bleibt klein so wie er sein sollte wenn der Reiter aktiv ist,

Nur sollte er breiter werden wenn man mit der Maus drüber fährt.

ReeN · Mar 10th 2018

Also soll der aktive Menüpunkt beim Hover auch breiter werden? Wenn ja, dann fehlt bei deiner CSS Anweisung...

CSS

@media screen and (min-width: 1025px), print {
    .mainMenu .boxMenu > li.active > a, .mainMenu .boxMenu > li:hover > a {
        width: 198px;
    }
}

... ein :hover hinter dem li.active. Sähe dann so aus:

CSS

@media screen and (min-width: 1025px), print {
    .mainMenu .boxMenu > li.active:hover > a, .mainMenu .boxMenu > li:hover > a {
        width: 198px;
    }
}

Harald-RS · Mar 10th 2018

So jetzt geht das zumindest aber jetzt wird wieder der Name eingeblendet

Wenn keine hover da ist.

WIe kann ich das nun ausblenden so das nur die Anzeige für die neuen Beiträge sichtbar bleibt beim nicht hovern.

Harald-RS · Mar 10th 2018

Und irgenwie bekomme ich auch nicht hin das die Icons dann nur bei den alten 14 / 15 Zoll Monitoren angezeigt werden.

Grischabock · Mar 10th 2018

Das könntest du anhand der Auflösung regeln -> https://docs.woltlab.com/view_css.html

Harald-RS · Mar 10th 2018

So sieht nun mein CSS Code aus.

CSS

@include screen-sm-up {

/* Seitenmenü - Anfang */

body {
    padding-left: 70px;
}    
    
.mainMenu .boxMenu {
    display: inline-block;
    overflow: visible;
    position: fixed;
    left: 0px;
    top: 50px;
    bottom: 0px;
    width: 70px;
    background-color: $wcfHeaderMenuBackground;
}    

.mainMenu .boxMenu > li.active > a {
    width: 77px;
}        
    
.mainMenu .boxMenu > li.active:hover > a, .mainMenu .boxMenu > li:hover > a {
    width: 198px;
}

.mainMenu .boxMenu > .boxMenuHasChildren > a::after {
    content: "";
}
    
.mainMenu .boxMenu .boxMenuDepth1 {
    border-radius: 0px;
    left: 198px;
    margin-top: -50px;
}    
    
.mainMenu .boxMenu > li > a::before {
    height: 32px;
    width: 32px;
    line-height: 28px;
    font-size: 32px;
    margin-right: 10px;
}

.mainMenu .boxMenu > li > a[href*="cms"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f015";
}

.mainMenu .boxMenu > li > a[href*="cms/article-list"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f1ea";
}

.mainMenu .boxMenu > li > a[href*="forum/"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f02d";
}

.mainMenu .boxMenu > li > a[href*="/board/41-marktplatz/"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f07a";
}

.mainMenu .boxMenu > li > a[href*="gallery"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f03e";
}

.mainMenu .boxMenu > li > a[href*="lexicon"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f187";
}

.mainMenu .boxMenu > li > a[href*="garage"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f1b9";
}

.mainMenu .boxMenu > li > a[href*="calendar"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f073";
}

.mainMenu .boxMenu > li > a[href*="usermap"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f124";
}

.mainMenu .boxMenu > li > a[href*="poi"]::before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    content: "\f08d";
}
    
/* Seitenmenü - ENDE */
}

Display More

Nur irgendwie will das ganze nicht anspringen wenn ich meinen Monitor auf 800x600 einstelle da geht das Stil automatisch in die Tablet Ansicht.

Grischabock · Mar 10th 2018

Was hast du hier eingestellt?

Bin mir gerade nicht sicher wie es das WSC handhabt mit dieser Ausflösung, ob das Verhalten normal ist bei einer grösse von 800 x 600

Harald-RS · Mar 10th 2018

Das habe ich drinnen stehen.

ICONS für Hauptmenü / Seitenmenü

Participate now!

Share