0
Ich erstellte CSS Mobile Menü auf meiner Website und es funktioniert gut auf meinem Laptop. Wenn ich Browser auf Laptop unter 680px minimiere, wurde Standardmenü bewegliches Menü, aber auf Smartphone funktioniert nicht so, dass es Standardmenü bleibt. Was habe ich falsch gemacht?Mobile Menü nicht auf dem Handy nur auf dem Desktop angezeigt
/* CSS Document */
body{
\t font-family: 'Prompt', Sans-serif;
\t background-image: url(wallpaper.png);
\t background-color:#ECCB6C;
\t background-repeat: no-repeat;
\t background-attachment: fixed;
\t margin: 0;
\t padding: 0;
\t text-align: center;
\t }
header{
\t background-image:url(logo.png);
\t background-repeat:no-repeat;
\t background-position:bottom left;
\t width:60%;
\t height:220px;
\t margin:0 auto;
\t padding:0;
\t }
nav{
\t width:70%;
\t height:auto;
\t margin:0 auto 3px auto;
\t background-image:url(hfbkg.png);
\t padding:0 80px 0 80px;
\t }
nav ul{
\t overflow:hidden;
\t padding:0;
\t text-align:center;
\t margin:0;
\t transition:max-height 0.4s;
\t -webkit-transition:max-height 0.4s;
\t -ms-transition:max-height 0.4s;
\t -moz-transition:max-height 0.4s;
\t -o-transition:max-height 0.4s;
\t }
nav ul li{
\t display:inline-block;
\t padding:5px 7px;
\t }
nav ul li:hover{
\t background-color:#FFFFFF;
\t }
.handle {
\t width:100%;
\t text-align:left;
\t box-sizing:border-box;
\t padding:15px 10px;
\t cursor:pointer;
\t color:#FFFFFF;
\t display:none;
\t }
\t
@media screen and (max-width: 680px){
\t nav ul{
\t \t max-height:0;
\t }
\t .showing{
\t \t max-height:20em;
\t } \t
\t nav ul li{
\t \t box-sizing:border-box;
\t \t width: 100%;
\t \t padding:15px 0px;
\t \t margin:0;
\t \t text-align:left;
\t }
\t .handle{
\t \t display:block;
\t }
\t }
\t
@media (max-width:680px){
\t #kontakt{
\t \t width:100%;
\t }
\t #iframe{
\t \t width:100%;
\t }
\t }
\t
section{
\t width:70%;
\t height:auto;
\t background-image:url(textbkg.png);
\t line-height:1.5em;
\t font-size:1.1em;
\t padding:60px 80px;
\t margin:0 auto;
\t clear:both;
\t }
section a:link {
\t color:#000000;
\t }
section a:hover {
\t text-decoration: none;
\t color:#FFAE00;
\t }
section a:visited {
\t text-decoration: none;
\t color:#000000;
\t }
#textarea{
\t width:350px;
\t height:200px;
\t padding:2px;
\t margin:5px;
\t }
#ime{
\t width:350px;
\t height:20px;
\t padding:2px;
\t margin:5px;
\t }
#email{
\t width:350px;
\t height:20px;
\t padding:2px;
\t margin:5px;
\t }
#decoupauge img{
\t margin:1%;
\t border: thick solid;
\t with: 15px;
\t color: #353439;
\t padding:2px;
\t }
#ukrasi img{
\t margin:1%;
\t border: thick solid;
\t with: 15px;
\t color: #353439;
\t padding:2px;
\t } \t
#sponzori{
\t margin:5%;
\t align-content:center;
\t }
#kontaktobr{
\t width:400px;
\t height:auto;
\t margin:20px 0;
\t padding:10px;
\t float:left;
\t }
#iframe{
\t float:right;
\t margin:20px 0;
\t padding:10px;
\t }
#adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
\t width:410px;
\t height:auto;
\t margin:10px;
\t padding:20px;
\t }
#adresa p {
\t margin:0px;
\t padding:0;
\t }
#adresa a:link{
\t color:#000000;
\t text-decoration: none;
\t }
#adresa a:hover{
\t text-decoration: none;
\t color:#FFAE00;
\t }
footer{
\t width:70%;
\t height:auto;
\t margin:3px auto 0 auto;
\t background-image:url(hfbkg.png);
\t padding:5px 80px;
\t text-align:end;
\t color:#FFFFFF;
\t clear:both;
\t }
footer a:hover{
\t color:#FBEE9A;
\t } \t
a{
\t margin:0;
\t }
a:link {
\t color: #FFFFFF;
\t text-decoration: none;
\t }
a:visited {
\t text-decoration: none;
\t color:#FFFFFF;
\t }
a:hover {
\t text-decoration: none;
\t color:#363539;
\t }
a:active {
\t text-decoration: none;
\t color: #363539;
\t }
p{
\t text-align:justify;
\t }<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<style type="text/css">
body,td,th {
\t font-family: Prompt, Sans-serif;
}
</style>
</head>
<body background="wallpaper.png">
<header>
</header>
<nav>
<ul>
<a href="index.html"><li>Početna</li></a>
<a href="terapija.html"><li>Terapije</li></a>
<a href="galerija.html"><li>Glerija</li></a>
<a href="donacije.html"><li>Donacije</li></a>
<a href="linkovi.html"><li>Linkovi</li></a>
<a href="kontakt.html"><li>Kontakt</li></a>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
<h3><strong>O nama</strong></h3>
<p> Udruga je počela sa radom 2013. godine..</p>
</section>
<script>
\t $('.handle').on('click', function(){
\t \t $('nav ul').toggleClass('showing');
\t });
\t </script>
<footer>
<a>Copyright 2016</a>
</footer>
</body>
</html>
Ty, jetzt gut funktioniert. – Jurica