<div class="sidenav">
<a href="#">Hírek</a>
<a href="#">Infó</a>
<a href="#">Blabla</a>
<a href="#">Elérhetőség</a>
</div>
<div class="main">
...
</div>
CSS:.sidenav {
height: 100%;
width: 160px;
position: fixed; /* Fix pozíció */
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Navigáció menü linkek*/
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
2 az 1 ben:<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
font-size: 28px;
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
<a href="#about">Hírek</a>
<a href="#services">Információk</a>
<a href="#clients">Blabla</a>
<a href="#contact">Elérhetőség</a>
</div>
<div class="main">
<h2>Sidebar Peacenek</h2>
<p>Ez a Sidebar FIX méretű (100%) tehát mindig látható!!!</p>
<p>Scroll down the page to see the result.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
Teszt:
Csatolmány:
Screenshot_2018-12-02-09-57-30-970_com.android.chrome.png [ 308.95 KiB | Megtekintve 2039 alkalommal ]
The Peace írta:
Hey People!
Valaki aki ért rendesen a Css-hez + html-hez akkor én hogyan hozzak létre 1 balsávot?
a kordinátáit hogyan kérjem le ? (Hírek-et) akarok balsávra...
Aki segít megy a pacsi.