侧边栏变成移动设备的可切换顶栏
[英]Sidebar into toggleable topbar for mobile devices
问题描述
Hello dear Stackoverflow community,
你好亲爱的 Stackoverflow 社区，
I have problems making a certain page responsive and I need some help.我在使某个页面响应时遇到问题，我需要一些帮助。
I'm trying to make my side-navbar responsive and have encountered a few hurdles.我试图让我的侧导航栏响应并遇到了一些障碍。
Although I managed to adjust my navbar to the screen size, I don't know how to make my navbar toggle for mobile users so that my navbar doesn't have to take up the whole screen.尽管我设法将导航栏调整为屏幕大小，但我不知道如何为移动用户切换导航栏，以便导航栏不必占据整个屏幕。
My second question is how best to center my navbar in desktop mode like on this page ( http://www.christophurwalek.at/ ) so that my navbar and an image are in the center of the page.我的第二个问题是如何最好地将我的导航栏置于桌面模式中，如本页（ http://www.christophurwalek.at/ ），以便我的导航栏和图像位于页面的中心。
I look forward to your answers!我期待着您的回答！
Here is my code:这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap"
rel="stylesheet">
<title>Title</title>
<!-- ========== Stylesheet START ========== -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
width: 400px;
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
align-items: center;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
div.content {
margin-left: 400px;
padding: 1px 16px;
height: 100%;
}
@media screen and (max-width: 1000px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
@media screen and (max-width: 604px) {
.sidebar a {
text-align: center;
float: none;
}
}
.sidebar li{
list-style: none;
}
</style>
<body>
<!-- ========== NAVBAR START ========== -->
<div class="sidebar">
<a class="active" href="#home">Logo</a>
<a href="#">painting</a>
<a href="#">drawing</a>
<a href="#">collage</a>
<a href="#">video</a>
<a href="#"><li> </li></a>
<a href="#">current</a>
<a href="#">text</a>
<a href="#">biography</a>
<a href="#">contact</a>
</div>
<div class="content">
<h2>Lorem Ipsum</h2>
<img style="max-width: 700px; height: auto;"src="https://images.pexels.com/photos/1000366/pexels-photo-1000366.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
</body>
</html>
3 个解决方案
解决方案1
0 2021-04-23 20:18:26
First tip try to use vw and vh for instead of px for the size of the things you want to make responsive.第一个提示尝试使用 vw 和 vh 而不是 px 来表示您想要做出响应的事物的大小。
vw = view width vw = 视图宽度
vh = view height vh = 视图高度
and to change the style when the window size change try to use:并在 window 大小更改时更改样式尝试使用：
@media screen and (min-width : the size of the screen where your style has to change) {
your style
}
min-width is for when the window is over a certain width min-width 适用于 window 超过一定宽度时
max-width is for when the window is under a certain width max-width 适用于 window 低于一定宽度时
min-height is for when the window is over a certain height min-height 适用于 window 超过一定高度时
max-height is for when the window is under a certain height max-height 适用于 window 低于某个高度时
解决方案2
0 2021-04-23 20:19:19
@asar13, @asar13,
please follow the links below and you will find some very useful information related to your questions.请点击下面的链接，您会发现一些与您的问题相关的非常有用的信息。
how to make my navbar toggle for mobile users
https://www.javascriptjanuary.com/blog/modern-responsive-navbar-with-css-grid-and-media-query https://www.javascriptjanuary.com/blog/modern-responsive-navbar-with-css-grid-and-media-query
https://medium.com/csun-metalab/creating-a-simple-mobile-first-grid-system-1e883a85fa3f https://medium.com/csun-metalab/creating-a-simple-mobile-first-grid-system-1e883a85fa3f
how best to center my navbar in desktop mode
https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
In a way, a response for both of your questions is css display: grid;在某种程度上，你的两个问题的答案是 css display: grid;
Take care and happy learning, Eugene.尤金，保重并快乐学习。
解决方案3
0 2021-04-23 20:22:08
you seem to be linking to bootstrap but not using it.您似乎正在链接到引导程序但没有使用它。 Try using the.container.row and.col classes to center your content.尝试使用 .container.row 和 .col 类来居中您的内容。 Also consider upgrading to Bootstrap 4 or 5.还可以考虑升级到 Bootstrap 4 或 5。
For the Nav head to Bootstraps built in nav component https://www.w3schools.com/bootstrap/bootstrap_navbar.asp对于导航头，请使用内置导航组件https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
or Bootstrap 4 nav: https://getbootstrap.com/docs/4.0/components/navbar/或 Bootstrap 4 导航： https://getbootstrap.com/docs/4.0/components/navbar/
<style type="text/css">
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
text-align: left;
/*width: 400px;*/
background-color: transparent;
position: fixed;
height: 100%;
overflow: auto;
align-items: center;
}
.sidebar a {
display: block;
color: #666666;
padding: 8px;
text-decoration: none;
}
.sidebar a.active {
background-color: transparent;
color: #4d4d4d;
}
.sidebar a:hover:not(.active) {
background-color: transparent;
color: rgb(49, 49, 49);
}
div.content {
margin-left: 400px;
padding: 1px 16px;
height: 100%;
}
@media screen and (max-width: 1000px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
@media screen and (max-width: 604px) {
.sidebar a {
text-align: center;
float: none;
}
}
.sidebar li{
list-style: none;
}
</style>
<body>
<!-- ========== NAVBAR START ========== -->
<div class="container">
<div class="row">
<div class="col sidebar">
<a class="active" href="#home">Logo</a>
<a href="#">painting</a>
<a href="#">drawing</a>
<a href="#">collage</a>
<a href="#">video</a>
<a href="#"><li> </li></a>
<a href="#">current</a>
<a href="#">text</a>
<a href="#">biography</a>
<a href="#">contact</a>
</div>
<div class="col content">
<h2>Lorem Ipsum</h2>
<img style="max-width: 700px; height: auto;"src="https://images.pexels.com/photos/1000366/pexels-photo-1000366.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.