Menü für Mobile und Desktop

Mehr
1 Monat 3 Wochen her - 1 Monat 3 Wochen her #3203 von Harry
Harry erstellte das Thema Menü für Mobile und Desktop
Hallo Leute,

habe wieder ein Problem beim erstellen unserer HP....
hier der Link zur Seite: https://lightcolorshadow.com

Wir haben bei der Desktop-Variante das Untermenü so angepasst, daß es so sitzt wie wir es uns vorstellen --> Knowledge/Review
soweit so gut...
Jedoch passt das "Mobile Menü" nicht, da dort das "Review" jetzt links über "Knowledge" steht.
Besteht die Möglichkeit diese beiden Positionen getrennt von einander zu definieren?

Gibt es einen "Workaround" dafür?

Was haben wir versucht:
ich habe schon versucht 2 mal das gleiche Menü einzubinden an 2 verschiedenen Positionen:
1. Menu) Position 1 - wird deaktiviert wenn Mobile aktiv mit " hidden-Phone"
2. Menu) verschiedene Positionen versucht - wird deaktiviert wenn Desktop-view aktiviert ist mit " hidden-desktop"
Problem ist bei dieser Variante, daß entweder das Mobile-Menü an einer Position sitzt an der man es nicht brauchen kann, oder wenn es verschiebt mir den Rest der Seite wenn es unsichtbar ist....

Wo möchten wir hin?:
Die Desktopvariante passt schon mal - Yeahh *hust*
ich brauche noch ein Menü für die Mobile Nutzung..

Ich weiß nicht ob ich mich verständlich ausgedrückt habe - für Fragen stehe ich zur Verfügung.

Besten Dank für Eure Zeit und Mühe
BonnyAndClyde2011
Letzte Änderung: 1 Monat 3 Wochen her von Harry.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 3 Wochen her #3205 von Thomas Hunziker
Thomas Hunziker antwortete auf das Thema: Menü für Mobile und Desktop
In CSS kannst du mittels media-queries Regeln schreiben welche nur für kleine Auflösungen gelten. Damit solltest du es hinkriegen.
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 3 Wochen her - 1 Monat 3 Wochen her #3206 von Matthias
Matthias antwortete auf das Thema: Menü für Mobile und Desktop
Ich habe deine custom.css mal etwas umformatiert, um sie übersichtlicher zu gestalten (Das Template behandelt die custom.css wie eine LESS-Datei, das heißt, man kann Blöcke verschachteln, Variablen nutzen, ...).
Eigenschaften müssen nicht doppelt definiert werden, nur weil man eine andere Eigenschaft des Blocks ändert.
Wenn man Eigenschaften über das Backend definieren kann, sollte man das auch tun, da so doppelter Code vermieden wird.
Die Schatten lassen sich mit CSS3-Effect im Backend deaktivieren.

(Ich habe die - in background-image durch _ ersetzt, damit meine Antwort nicht geblockt wurde)
/* Schriftart der Seite ändern - Hintergrundbild entfernt (rauschen) */
/** Kann im Backend alles konfiguriert werden (Fonts, Colors) **/

body {
	margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 13px;
	line-height: 1.3em;
	color: #555555;
	background-color: #ffffff;
	background_image: none;
}

/* Maincontent Hintergrundbild entfernt (rauschen) */

#maincontent {
	background_image: none;
}

#topmenu ul.menu {
	/* Schriftgröße vom Menü und Schatten entfernt*/
	/** > war überflüssig, die Schriftart wurde schon im body definiert, entfernen wäre none, hier wird der Schatten über die Schrift gelegt (2x der gleiche Schatten) **/

	li a,
	li span.separator {
		font-size: 45px;
		font-weight: 200;
		text-shadow: 0px 0px 0 #000;
	}

	li ul li a {
	}

	/* Untermenücontainer positioniert */

	ul.nav-child {
		/** Nur Desktop **/
		@media (min-width: @navbarCollapseDesktopWidth) {
			left: 47px;
			top: 42px;
			width: 180px;
			height: 30px;
		}

		box-shadow: 0 0 4px #000;

		li a,
		li span.separator {
			font-size: 15px;
			width: 111px;

			/* Untermenü Schriftschatten entfernen*/
			/** entfernen wäre none, hier wird der Schatten über die Schrift gelegt (2x der gleiche Schatten) **/
			text-shadow: 0 0 0 #000;
		}
	}

	/* Menü zentrieren */

	text-align: center;
	font-variant: small-caps;
}

/* Äussere Linie um den Maincontent entfernt */
/** Nur für den Blog **/

#maincontent > .blog {
	border: none !important;
}

/* Gallery Ansicht - Titel linksbündig, Schriftgröße in PX angepasset, Border bottom Style angepasst, padding auf 0 gesetzt */
/** 0 hat normalerweise keine Einheit, er muss nicht für oben/unten und rechts/links separat definiert werden, wenn beide Richtungen den gelcihen Wert nutzen **/

.page-header h1 {
	border-bottom: 1px solid;
	color: #000000;
	font-size: 42px;
	font-variant: normal;
	padding: 0;
	text-align: left;
	font-weight: 200;
}

/* KategorieAnsicht einer einzelnen Kat. Border auf Null mit "Important" und Box-Shadow auch auf Null gesetzt*/
/** entfernen wäre none, hier wird der Schatten unter die Box gelegt -> unsichtbar,
    der Rand wird auch mit none entfernt, hier wird er auf 0px Breite geschrumpft **/

.pg-cv-box {
	box-shadow: none;
	border: none !important;
}

/* unnötige Line in der KategorieAnsicht entfernt */

.page-header {
	border-bottom: none;
}

/* Subfoot Schatten entfernt - Copyright */

#subfoot {
	box-shadow: none;
}

/* Go to Top - Style geändert */

#footer a#gotop {
	color: #000;
	text-shadow: none;
}

/** Margin wird zum Entfernen auf 0 gesetzt **/
#scroll_up {
	float: none;
	font-size: 12px;
	font-weight: 200;
	margin-top: 0;
	text-align: center;
}

/* CookieHint Button anpassung zweiter Teil - erster Teil in der Style.css */

.btn {
	background_image: none;
}

/*Papierecken-Effekt entfernt in der Modulposition "bottom2" */

.module .chrome-border {
	&.left-bottom, &.left-top, &.right-top, &.right-bottom {
		background_image: none;
	}
}

/*Papierecken-Effekt entfernt in den Artikeln (aufgebogenes Papier) */ 

.shadow-right, .shadow-left {
	background_image: none;
}
Letzte Änderung: 1 Monat 3 Wochen her von Matthias.
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 3 Wochen her #3209 von Thomas Hunziker
Thomas Hunziker antwortete auf das Thema: Menü für Mobile und Desktop
> Ich habe die - in background_image durch _ ersetzt

Sollte eigentlich nicht mehr geblockt werden. Falls doch muss ich nochmal mit dem Hoster reden :)
Folgende Benutzer bedankten sich: Harry

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 3 Wochen her - 1 Monat 3 Wochen her #3219 von Harry
Harry antwortete auf das Thema: Menü für Mobile und Desktop
Shit beim Absenden einen Servertimeout bekommen... also alles nochmal von vorne ^^

So sieht jetzt mein Code in der Custom.css aus die auf meinem Server liegt:
Note: Background_image hat natürlich einen "-" ;-)
/* Schriftart der Seite ändern - Hintergrundbild entfernt (rauschen) */


body {
        margin: 0;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 13px;
        line-height: 1.3em;
        color: #555555;
        background-color: #ffffff;
        background_image: none;
        text-shadow: none;

}

/* Maincontent Hintergrundbild entfernt (rauschen) */

#maincontent {
    background_image: none;
}

/* Schriftgröße vom Menü und Schatten entfernt*/

#topmenu ul.menu > li a,
        #topmenu ul.menu > li span.separator {
                font-size: 45px;
                font-family: "Source Sans Pro";
                font-weight: 200;
                text-shadow: none;
}

/* Untermenü Schriftschatten entfernen*/

#topmenu ul.menu li ul li a {
    text-shadow: none;
}

/* Untermenücontainer positioniert - diese einstellung (left, top, width, height) wird laut Firebug nicht verwendet*/

ul.nav-child {
                /** Nur Desktop **/
                @media (min-width: @navbarCollapseDesktopWidth) {
                        left: 47px;
                        top: 42px;
                        width: 180px;
                        height: 70px;
                        box-shadow: none;
                        }


         li a,
         li span.separator {
                        font-size: 15px;
                        width: 111px;
                           }
              }


/* erst durch diese Zeilen wird das Untermenue positioniert - bei Fullscreen */

#topmenu ul.menu ul.nav-child {
    border-radius: 4px;
    left:48px; top:43px; width:181px; height:71px;
}

/* erst durch diese Zeilen wird das Untermenue in der Schriftgroeße und breite angepasst - bei Fullscreen */

#topmenu ul.menu ul.nav-child li a, #topmenu ul.menu ul.nav-child li span.separator {
    font-size: 15px;
    width: 111px;
}


/* Menü zentrieren und SMALL-CAPS gesetzt*/

#topmenu .nav.menu {
    text-align: center;
    font-variant: small-caps;
    }

/* Äussere Linie um den Maincontent entfernt */

#maincontent > .blog {
    border: none !important;
}

/* Gallery Ansicht - Titel linksbündig, Schriftgröße in PX angepasset, Border bottom Style angepasst, padding auf 0 gesetzt */

.page-header h1 {
        border-bottom: 1px solid;
        color: #000000;
        font-size: 42px;
        font-variant: normal;
        margin: 0 0 25px 0;
        padding: 0 0px;
        text-align: left;
        font-weight: 200;
}

/* KategorieAnsicht einer einzelnen Kat. Border auf Null mit "Important" und Box-Shadow auch auf Null gesetzt*/

.pg-cv-box {
         box-shadow: none;
         border: none !important;
}

/* unnötige Line in der KategorieAnsicht entfernt */

.page-header {
    border-bottom: none;
}

/* Subfoot Schatten entfernt - Copyright */

#subfoot {
    box-shadow: none;
}

/* Go to Top - Style geändert */

#footer a#gotop {
    color: #000;
    text-shadow: none;
}

#scroll_up {
    float: none;
    font-size: 12px;
    font-weight: 200;
    margin-top: none;
    text-align: center;
}

/* CookieHint Button anpassung zweiter Teil - erster Teil in der Style.css */

.btn {
    background_image: none;
}

/*Papierecken-Effekt entfernt in der Modulposition "bottom2" */

.module .chrome-border.left-bottom {
    background_image: none;
}

.module .chrome-border.left-top {
    background_image: none;
}

.module .chrome-border.right-top {
    background_image: none;
}

.module .chrome-border.right-bottom {
    background_image: none;
}

/*Papierecken-Effekt entfernt in den Artikeln (aufgebogenes Papier) */

.shadow-right {
    background_image: none;
}

.shadow-left {
    background_image: none;
}

Dieser Code wollte nicht funktionieren - warum auch immer:
.shadow-right, .shadow-left {
	background_image: none;
}

Dann unter den Zeilen nach /** Nur Desktop **/ werden die werte für left, top, width, height ignoriert in der Desktopansicht.
Habe die anderen Zeilen wieder eingefügt (#topmenu ul.menu ul.nav-child und #topmenu ul.menu ul.nav-child li a, #topmenu ul.menu ul.nav-child li span.separator) und um 1px verändert, dann mit Firebug ausgelesen und festgestellt, daß diese Werte angenommen werden. Wenn diese Zeilen deaktiviert werden dann ist in der Desktopansicht wieder das Untermenü verschoben und klein.

Ich weiß, daß hier kein CSS Forum ist, aber kannst Du mir bitte diese Zeile erklären?
@media (min-width: @navbarCollapseDesktopWidth)
Ich habe versucht hier schlauer zu werden: https://wiki.selfhtml.org/wiki/CSS/Media_Queries sehe nicht durch - sorry
stehe noch am Anfang mit CSS. :-/

Besten Dank für Eure Zeit und Mühe, ihr seid wirklich Klasse! Danke vielmals. Jetzt sieht es so aus wie ich es haben wollte ;-)
Schöne Grüße
Harry
Letzte Änderung: 1 Monat 3 Wochen her von Harry.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Mehr
1 Monat 3 Wochen her #3220 von Matthias
Matthias antwortete auf das Thema: Menü für Mobile und Desktop
Die Zeilen funktionieren nicht, da du den äußeren Block (#topmenu ul.menu) entfernt hast.

Die besagte Zeile für den shadow-right/left funktioniert bei mir. Allerdings ist
.shadow-right, .shadow-left {
    display: none;
}
besser, da so auch der beanspruchte Platz freigegeben wird.

Wie schon oben bemerkt, sind einige Angaben besser im Backend zu tätigen, da so die Werte in der templateX.css geändert werden, statt später überschrieben zu werden.

@media (min-width: @navbarCollapseDesktopWidth):
@media ist für die Auswertung von Browserspezifischen Werten
min-width sagt, dass die Breite des Browserfensters mindestens so groß sein muss, wie angegeben, damit die darin gelagerten Regeln aktiv werden
@navbarCollapseDesktopWidth ist eine LESS-Variable, die den im Backend gewählten Wert von "mobile view for" beinhaltet.

Bitte Anmelden oder Registrieren um der Konversation beizutreten.

Ladezeit der Seite: 0.095 Sekunden
Powered by Kunena Forum
   
© Bakual