Semi1717: Menü-Button für responsives HTML

SELF-Forum

Menü-Button für responsives HTML

Semi1717
– Informationen zu den Bewertungsregeln

Hallo,

ich erstelle im Moment eine responsive HTML-Seite. Mit dieser bin ich im Grundgerüst schon nahezu fertig. Ich habe eine „normale“ Menüleiste die sich an die jeweilige Fenstergröße anpasst UND bei kleineren Fenstern (Mobilgeräte) mit einem Button aufgemacht (nach unten)werden soll. Dies jedoch bekomme ich nicht hin 😕

Über jede Hilfe wäre ich sehr dankbar!

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Menü-Button für responsives HTML

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Semi1717

    Ich habe eine „normale“ Menüleiste die sich an die jeweilige Fenstergröße anpasst UND bei kleineren Fenstern (Mobilgeräte) mit einem Button aufgemacht (nach unten)werden soll. Dies jedoch bekomme ich nicht hin 😕

    Über jede Hilfe wäre ich sehr dankbar!

    1. Erklärung
    2. Markup berichtigt: Thread CSS-Kniffliges zum Wochenende
    3. Funktioniert auch mit Esc-Taste

    Ergebnis: https://codepen.io/gunnarbittersmann/pen/jYaRJM

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Menü-Button für responsives HTML

      Semi1717
      – Informationen zu den Bewertungsregeln

      Hi,

      vielen Dank für deine Hilfe. Allerdings ist auf der codepen-Seite in HTML und CSS der gleiche Inhalt drin :(

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Menü-Button für responsives HTML

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Semi1717

        Allerdings ist auf der codepen-Seite in HTML und CSS der gleiche Inhalt drin :(

        ??

        Screenshot vom CodePen

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Menü-Button für responsives HTML

          Semi1717
          – Informationen zu den Bewertungsregeln

          Okay,

          danke für die Seite als Tipp.

          Wie gesagt habe ich auch schon eine Seite erstellt und mittlerweile auch jQuery implementiert.

          Jedoch ist bei mir nun einfach oben links der Menu-Button, egal bei welcher Fenstergröße, und verbleibt ohne Funktion wenn man ihn klickt. Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:

          HTML

          <!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<link rel="stylesheet" href="style.css" type="text/css" />
			<link rel="icon" href="images/lllins.png">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
			<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function() {				
					$('.menubutton').click(function() {
						$('nav').slideToggle('slow');
					});
				});
			</script>
			<title>Microsoft</title>	
		</head>
		<body>
			<section id="menubar">
				<ul>
					<li><a class="menubutton" href="#menu"><img src="images/menu.png"></a>
				</ul>
			</section>
			<header>
				<h1>Microsoft</h1>
			</header>
			<nav class="nav">
				<ul>
					<li><a href="index.html">Startseite</a></li>
					<li><a href="steckbrief.html">Steckbrief</a></li>
					<li><a href="geschichte.html">Geschichte</a></li>
					<li><a href="microsoft_heute.html">Microsoft heute</a></li>
					<li><a href="quellen.html"class="active">Quellen</a></li>
				</ul>
			
			</nav>
			<section id="main">
				<article>
					<h2>Quellen</h2>
					<p>Letzter Zugriff am 14.01.2018:</p>
					<ol>
						<li><a href="https://de.wikipedia.org/wiki/Microsoft">Wikipedia(Microsoft)</a></li>
						<li><a href="https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2017/02/17/104290057-Bill_Gates_paris.1910x1000.jpg">Bild von Bill Gates</a></li>
						<li><a href="http://altairclone.com/">Altair 8800-Bild</a></li>
					</ol>
					<p>Letzter Zugriff am 26.01.2018:</p>
					<ol>
						<li><a href="https://www.finance-monthly.com/Finance-Monthly/wp-content/uploads/2017/06/IBM-banner.jpg">IBM-Logo</a>
						<li><a href="https://de.wikipedia.org/wiki/IBM">Wikipedia (IBM)</a></li>
						<li><a href="https://cdn2.macworld.co.uk/cmsdata/features/3452845/iPad-iPhone-Office-Suite.jpg">MS Office Logo</a></li>
					</ol>
					<p>Letzter Zugriff am 27.01.2018:</p>
					<ol>
						<li><a href="https://kurtsh.files.wordpress.com/2016/03/image.png">Redmond Campus Bild</a></li>		
						<li><a href="https://upload.wikimedia.org/wikipedia/de/timeline/3fa73ef79ced3f95c4f536b1bd6023bf.png">Umsatzstatistik</a></li>	
						<li><a href="https://de.wikipedia.org/wiki/Bill_Gates">Wikipedia (Bill Gates)</a></li>		
					
					</ol>					
					
					</ol>
				</article>
			<aside>
				<section>
					<h2>Infos zur Nutzung von urheberrechtlich- geschützten Bildern</h2>
					Alle verwendeten Bilder sind  gemäß §53, Abs.1 UrhG zur nicht-kommerziellen Nutzung im schulischen Bereich freigegeben.
				</section>
				<section>
					<h2>Textfeld</h2>
					<img src="images/cortanagif.gif" alt="msgif">		
				</section>
				<section>
					<h2>Kategorien</h2>
					<ul>
						<li>abc</li>
						<li>abc</li>
						<li>1234567890</li>
					</ul>
			</aside>	
		</section>
		<footer>
			<ul>
				<li>&copy; Microsoft</li>
				<li>Validator Certificate</li>
				<li>Sonstiges</li>
			</ul>
		</footer>
		</body>
	</html>

          CSS:

          /* Style allgemein*/
body {
	background: lightgray;
	font-size: 100%;
	margin:0em;
	padding:0em;	
	font-family: Helvetica;
}
h1 {
	font-size: 3.0em;
	line-height: 3.8em;
	font-family: Helvetica;
	font-weight: 100;
	color:#E2DBDB;
	margin:0em;
}
h2 {
	font-size: 1.563em;
	line-height: 1.8em;
	font-weight: bold;
	color:#2F2B2C;
	margin:0em;
	padding:1.25em;
	text-align: left;
}
p {
	font-size: 1.24em;
	line-height: 1.75em;
	font-weight: 100;
	color:#2F2B2C;
	margin:0em;
	padding:1.25em;
	text-align: justify;
}
ul {
	margin:0px;
	padding:0px;
}
li {
	
	list-style: square;
	font-weight: 100;
	color:#2F2B2C;
	line-height: 1.25em;
	margin: 0;
	padding: 0em;
	text-align: justify;
	margin:0.313em 0em 0.313em 0em;
	font-size: 1.23em;
		
}
img {
	width: 90%;
	height: auto;
	max-width: 100%;
	margin-left: 12px;
	
}
iframe {
	width: 90%;
	height: auto;
	margin-left: 14px;
	margin-bottom: 12px;
}
a {
	text-decoration: none;
}
#sbl {
	margin-bottom: 1.4em;
	margin-top: 1.4em;
}



/* On Top Bar */
#menubar {
	display: block;
	background: #FFFFFF;
}
#menubar ul {
	display: block;
	width: 2em;
	padding: 0.9em;	
}
#menubar ul li {
	display: inline;
}
#menubar ul li a.menubutton {

}
/* Header */
header {
	display: block;
	font-size: 1.19em;
	background:#2F2C2C;
	text-align: center;
	
}
/* Navigation */
nav {
	display: block;
	height: 3.3em;
	background:#FFFFFF;
	text-align: center;
	
}


nav ul {
	display: block;
}
nav ul li {
	display: inline;
	margin: 0em 0.188em 0em 0.188em
}
nav ul li a {
	color:#454040;
	font-size: 1.125em;
	line-height: 2.5em;
	padding: 0.563em 0.938em 0.375em 0.983em;
}


nav ul li a:hover {
	background-color:#DBD9D8;
	border-bottom: 0.188em solid #E7590B;
}

nav ul li a.active {
	border-bottom: 0.188em solid #E7590B;
	
}
/* Content Bereich */
#main {
	display:block;
	width: 96%;
	max-width: 980px;
	margin: 1.25em auto;
	padding: 0em;
	
}
#main article {
	display:inline-block;
	width: 65.3%;
	background: #FFFFFF;
	vertical-align: top;
	margin: 0em;
	padding: 0em;
	text-align: center;
}
#main article img {
	max-width: 560px;
	box-shadow: 0px 0px 10px -5px #4C4948;
	border-radius: 5px;
}
#main aside  {
	display:inline-block;
	width: 30.6%;
	margin-left: 3%;
	padding: 0em;
	vertical-align: top;
}
#main aside section {
	margin-bottom: 1.563em;
	background: white;
	border-bottom: 0.188em solid #E7590B;
	
}
#main article h2 {
	padding: 1em 1.8em 1em 1.8em
}
#main aside section ul{
	padding: 0em 1.875em 1.25em 2.5em;
}
/* Footer ds1*/
footer {
	display:block;
	background:#2F2C2C;
	text-align: center;
	color: #FFFFFF;
	
}
footer ul {
	display: block;
	width: 100%;
	max-width: 980px;
	text-align: left;
	margin: 0px auto;
}
footer ul li {
	display: inline;
	font-size: 0.8em;
	line-height: 2.8em;
	color: white;
	padding: 0em 0.625em 0em 0.6235em;
}
footer ul li a {
	color: #E2DBDB
}
footer p {
	color: #FFFFFF;
	text-align: right;
}
footer a {
	color: white;

}

/* Mobile Devices Style */
@media screen and (max-width:800px) {
	body {
		font-size: 90%;	
	}
}

@media screen and (max-width:600px) {
	#main aside, #main article {
		width: 100%;
		display: block;
		margin: 0.25em 0em 0.625em 0em;
			
	}
}
@media screen and (min-width:550px) {
	
	}
@media screen and (max-width:550px) {
	body {
		font-size: 86%;	
	}
menubar ul li a.menubutton {
	
	}
	nav {
		display: none;
		height: auto;	
	}
	nav ul {
		display: block;
		margin: 0.3em 0em 0.3em 0em;
			
	}
}

          Vielleicht erkennt ja irgendjemand ein Problem und findet eine Lösung.

          Vielen Dank im Voraus!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Menü-Button für responsives HTML

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            @@Semi1717

            mittlerweile auch jQuery implementiert.

            Ach, du warst das?

            Du „jQuery eingebunden“? Warum das denn?

            $(document).ready(function() {				
	$('.menubutton').click(function() {
		$('nav').slideToggle('slow');
	});
});

            Das ist weit von einer guten Lösung entfernt.

            Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:

            Da ist nichts anzuschauen. Online-Beispiel, bitte.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Menü-Button für responsives HTML

              Semi1717
              – Informationen zu den Bewertungsregeln

              Hallo,

              das Problem hat sich mittlerweile erledigt.

              Bevor sich noch Weitere hiermit auseinandersetzen:

              Kann man dieses Thema löschen, als erledigt markieren oder schließen?

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Menü-Button für responsives HTML

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@Semi1717

                das Problem hat sich mittlerweile erledigt.

                Ich habe dir gerade etliche Probleme genannt, die noch erledigt werden sollten.

                Bevor sich noch Weitere hiermit auseinandersetzen:

                Kann man dieses Thema löschen, als erledigt markieren oder schließen?

                Nichts dergleichen. Hier bleiben alle Threads offen. Zumindest eine geraume Zeit, bis sie ins Archiv wandern.

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

          2. Menü-Button für responsives HTML

            Gunnar Bittersmann Homepage des Autors (Versionen)
            +1 Informationen zu den Bewertungsregeln

            @@Semi1717

            Damit es anschaulicher für euch ist, hier die komplette HTML+CSS-Datei:

            Was für die Anschaulichkeit des Ganzen zu tun wäre, hatte ich ja schon gesagt.

            Hab aber schonmal das HTML angeschaut:

            			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"

            Das fehlende > ist noch der kleinere Fehler. Der größere ist user-scalable=no. Weg damit! Nutzer sollen zoomen können, wenn sie es wollen. Oder müssen, um die Seite lesen zu können.

            			<section id="menubar">
				<ul>
					<li><a class="menubutton" href="#menu"><img src="images/menu.png"></a>
				</ul>
			</section>

            Das ist wohl keine section.

            Und das ist wohl keine Liste.

            Wie bereits verlinkt muss der Button innerhalb des nav-Elements sein.

            Apropos Button: Wieso ist das ein a-Element und kein button?

            Dem img fehlt der notwendige alt-Text.

            			<header>
				<h1>Microsoft</h1>
			</header>
			<nav class="nav">
				<ul>
					<li><a href="index.html">Startseite</a></li>
					<li><a href="steckbrief.html">Steckbrief</a></li>
					<li><a href="geschichte.html">Geschichte</a></li>
					<li><a href="microsoft_heute.html">Microsoft heute</a></li>
					<li><a href="quellen.html"class="active">Quellen</a></li>
				</ul>
			
			</nav>

            h1 sollte nicht die Website-Kennung verwendet werden, sondern für die jeweilige Seiten-Überschrift.

            Ich würde das nav-Element mit in den header setzen.

            Vor class="active" fehlt ein Leerzeichen. Die Klasse ist überflüssig; die aktuelle Seite sollte im Menü mit aria-current="page" gekennzeichnet werden – das lässt sich auch zum Stylen nutzen.

            Die aktuelle Seite sollte nicht verlinkt sein. Wenn ein Link, dann zum Hauptinhalt:

            <li><a tabindex="0" aria-current="page">Quellen</a></li>

            bzw.

            <li><a href="#main" aria-current="page">Quellen</a></li>

            			<section id="main">

            Ein sicheres Zeichen, dass das keine section ist, sondern der Hauptinhalt der Seite: <main id="main">

            				<article>
					<h2>Quellen</h2>

            Nein, kein article. Und das wäre dann die h1.

            					<img src="images/cortanagif.gif" alt="msgif">

            Auch für dieses Bild fehlt ein sinnvoller Alternativtext.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            Beitrag melden
            +1
            Informationen zu den Bewertungsregeln