| Autor | Zpráva | ||
|---|---|---|---|
| AS115 Profil |
#1 · Zasláno: 16. 12. 2020, 22:22:55
Zdravím,
jako amatér se snažím o aspoň trochu responzivní web. Při zobrazení na PC mám klasické menu s tím, že je skryté "hamburger menu", které se objeví po zobrazení na menších displejích. Nedaří se mi ale po zmenšení stránky na mobilní displej skrýt to původní menu (odkaz 1, odkaz 2...). Potřebuji, aby tam při zobrazení na menších displejích zůstala jen ta hamburger ikonka, která bude mít po rozbalení stejné odkazy, jako byly v klasickém "PC" menu. Mám tam nějak špatně visibility nebo nevím. Děkuji za každou radu. HTML: <!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8" />
<meta name="description" content="Stručný popis stránky (SEO)" />
<meta name="keywords" content="KlĂÄŤová slova stránky (SEO)" />
<meta name="author" content="all: jméno; e-mail" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, snippet, archive" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITLE</title>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px)" href="zaklad.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 1024px)" href="mobil.css" />
<link rel="stylesheet" type="text/css" media="print" href="styl_print.css" />
</head>
<body>
<main>
<header>
<h1>NADPIS</h1>
</header>
<nav>
<ul id="mainMenu">
<li><a href="#">Odkaz 1</a></li>
<li><a href="#">Odkaz 2</a></li>
<li><a href="#">Odkaz 3</a></li>
<li><a href="#">Odkaz 4</a></li>
<li><a href="#">Odkaz 5</a></li>
<li><a href="#">Odkaz 6</a></li>
<li><a href="#" title="menu"><img src="hamburger.png" height="40" width="40" class="hamburger"></a>
<ul>
<li><a href="#">Burger Menu 1</a></li>
<li><a href="#">Burger Menu 2</a></li>
<li><a href="#">Burger Menu 3</a></li>
<li><a href="#">Burger Menu 4</a></li>
<li><a href="#">Burger Menu 5</a></li>
<li><a href="#">Burger Menu 6</a></li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
Lorem ipsum dolor sit amet consectetuer felis faucibus felis convallis in. Eget mi orci elit augue sit Cum nibh risus metus risus. Ipsum lacinia dictumst id adipiscing magna consequat pretium ut in adipiscing. Vel Duis auctor ligula Praesent ut non tellus Quisque tortor Curabitur. Tristique amet lacinia tincidunt venenatis ut quis magna quis sed felis. Consequat Morbi Nulla consectetuer pretium.
<br><br>
<br><br>
<br><br>
<br><br>
Lorem ipsum dolor sit amet consectetuer felis faucibus felis convallis in. Eget mi orci elit augue sit Cum nibh risus metus risus. Ipsum lacinia dictumst id adipiscing magna consequat pretium ut in adipiscing. Vel Duis auctor ligula Praesent ut non tellus Quisque tortor Curabitur. Tristique amet lacinia tincidunt venenatis ut quis magna quis sed felis. Consequat Morbi Nulla consectetuer pretium.
</article>
<br><br>
<br><br>
<br><br>
<article>
Lorem ipsum dolor sit amet consectetuer felis faucibus felis convallis in. Eget mi orci elit augue sit Cum nibh risus metus risus. Ipsum lacinia dictumst id adipiscing magna consequat pretium ut in adipiscing. Vel Duis auctor ligula Praesent ut non tellus Quisque tortor Curabitur. Tristique amet lacinia tincidunt venenatis ut quis magna quis sed felis. Consequat Morbi Nulla consectetuer pretium.
</article>
</section>
<footer>
PatiÄŤka
</footer>
</main>
</body>
</html> CSS pro PC zobrazení: body {
background-color:#161616;
background: radial-gradient(#161616, #8a8a8a, #8a8a8a,#161616);
margin: 0px;
padding: 0px;
font-family: Arial Black, sans-serif;
font-size: 1em;
line-height: 1.5;
}
main {
width: 950px;
margin: 2em auto;
border: 30px double black;
color: gold;
background-color:black;
background: linear-gradient(135deg, #1b1818, #141414);
border-radius: 30px;
box-shadow: 0px 0px 20px #f3f3f3;
}
header {
padding: 50px;
text-align: center;
border-bottom: solid 10px black;
}
nav {
float: left;
padding: 5px;
margin: 5px;
text-align: center;
}
section {
margin-left: 240px;
padding: 20px;
border-left: solid 10px black;
text-align: justify;
}
footer {
padding: 20px;
text-align: center;
border-top: solid 10px black;
clear: both;
}
li {
list-style-type: none;
padding: 10px;
margin-left: -20px;
text-align: left;
}
li a{
color:gold;
font-size: 20px;
text-decoration: none;
}
li a:hover{
color: gold;
background-color: black;
border: ridge 4px gold;
border-radius: 10px;
padding: 10px;
box-shadow: 0px 0px 15px gold;
}
img.hamburger, ul ul
{
display: none;
}/* CSS Document */CSS pro mobily atd: body {
margin: 0px;
padding: 0px;
font-family: Arial Black, sans-serif;
font-size: 1em;
line-height: 1.5;
}
main {
width: 100%;
color: gold;
background-color:black;
background: linear-gradient(135deg, #1b1818, #141414);
box-shadow: 0px 0px 20px #f3f3f3;
}
header {
padding: 20px;
text-align: center;
border-bottom: solid 10px black;
}
nav {
// float: left;
padding: 30px;
margin: 0px;
text-align: center;
}
section {
// margin-left: 180px;
clear: both;
padding: 20px;
border-top: solid 10px black;
text-align: left;
}
footer {
text-align: center;
border-top: solid 10px black;
clear: both;
padding: 20px;
}
li {
list-style-type: none;
display: block;
margin: 0 60px 0 10px;
}
img.hamburger
{
margin-bottom: -5px;
border: solid 5px gold;
border-radius: 5px;
}
a:hover img.hamburger
{
opacity: 0.4;
box-shadow:0px 0px 15px gold;
}
/* Menu */
ul#mainMenu {
color:gold;
padding:5px;
margin:5px;
list-style-type:none;
}
ul#mainMenu ul {
color:gold;
padding:0;
margin:0;
list-style-type:none;
}
ul#mainMenu li {
float:left;
padding:5px;
width:150px;
}
ul#mainMenu a {
color:gold;
display:block;
text-decoration:none;
}
ul#mainMenu ul a:hover {
color:gold;
background-color:black;
text-decoration:underline;
border: solid 2px black;
border-radius: 5px;
}
ul#mainMenu ul {
margin-top:5px;
margin-left:-3px;
position:absolute;
visibility:hidden;
background-color:black;
}
ul#mainMenu li:hover ul {
visibility:visible;
}
ul#mainMenu li li {
float:none;
padding:6px;
} |
||
| Pavlínka Profil |
#2 · Zasláno: 16. 12. 2020, 22:34:27
pro stylovani mobilum a spol se pouziva @media
@media (max-width: 600px) {... |
||
|
Časová prodleva: 3 roky
|
|||
0