我已经在学校项目的标题中进行了编码,现在尝试为平板电脑和移动版本添加汉堡菜单。我希望在屏幕的右侧有汉堡菜单,而在左侧则有徽标,像导航,营业时间,电话号码等其他信息都将包含在汉堡菜单中。
我正坐在那里的是,我真的不知道将div放置在汉堡菜单上的位置。我已经建立了PC屏幕大小的标题,但是当我将屏幕拖动到移动屏幕的大小时,一切都搞砸了。看完教程并阅读了有关汉堡包菜单的信息后,我仍然坐在这里,不知道将汉堡包菜单的div放在哪里,除了平板电脑和移动设备的汉堡包菜单中的徽标之外,其他所有内容都没有。
在代码段中添加了标头的代码,该代码在代码段中显得很奇怪。可能是因为我写错了很多,但仍然可以使用:
这是标题的完整HTML和CSS代码:
testFunction
let popup = document.getElementById("Contact-popup");
popup.addEventListener("click", () => {
document.getElementById("contact_popup_page").style.display = "block";
});
let close = document.getElementById("close");
/** HEADER **/
body {
margin: 0 10%;
font-size: 12px;
}
a {
text-decoration: none;
color: #707070;
}
header {
box-shadow: 2px 2px 2px 3px rgb(0, 0, 0, 0.1);
position: fixed;
width: 80%;
background-color: #fff;
z-index: 100;
margin-top: 0;
}
.header__main {
width: 100%;
display: grid;
grid-template-areas: "box1 box2";
color: #707070;
}
.logo__section {
height: 100px;
grid-area: box1;
margin-left: 2.5%;
width: 40%;
}
.header__main>.logo__section>a>img {
width: 100%;
}
.nav__topRight {
width: 100%;
height: 100px;
grid-area: box2;
color: #000;
flex-direction: column;
margin-top: 0;
align-items: flex-end;
}
.flexbox1 {
margin: 1% 0 3% 0;
}
.nav__top {
display: flex;
justify-content: flex-end;
}
.nav__middle {
display: flex;
justify-content: flex-end;
margin: 5% 3% 0 0;
font-size: 1.8rem;
color: #707070;
}
/** Contact */
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
.contact {
font-size: 1.8rem;
color: #707070;
}
.contact__info {
margin-left: 5%;
}
.contact__info>p {
color: #707070;
display: inline;
font-size: 1.8rem;
margin: 0 15px 0 5px;
}
.contact_popup_page {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
}
.close,
.closer {
display: flex;
justify-content: right;
position: absolute;
font-size: 50px;
}
textarea:focus,
input:focus {
border-color: #fdb834 !important;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus:-ms-input-placeholder {
color: transparent;
}
textarea:focus::-webkit-input-placeholder {
color: transparent;
}
textarea:focus:-moz-placeholder {
color: transparent;
}
textarea:focus::-moz-placeholder {
color: transparent;
}
textarea:focus:-ms-input-placeholder {
color: transparent;
}
input::-webkit-input-placeholder {
color: #707070;
}
input:-moz-placeholder {
color: #707070;
}
input::-moz-placeholder {
color: #707070;
}
input:-ms-input-placeholder {
color: #707070;
}
textarea::-webkit-input-placeholder {
color: #707070;
}
textarea:-moz-placeholder {
color: #707070;
}
textarea::-moz-placeholder {
color: #707070;
}
textarea:-ms-input-placeholder {
color: #707070;
}
label {
display: block;
margin: 0;
}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
/*//////////////////////////////////////////////////////////////////
[ utility ]*/
/*//////////////////////////////////////////////////////////////////
[ Contact ]*/
.container-contact {
width: 100%;
min-height: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
.wrap-contact {
width: 500px;
background: #fff;
border-radius: 2px;
padding: 30px 40px 40px 40px;
}
/*==================================================================
[ Form ]*/
.contact-form {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-form-title {
width: 100%;
display: block;
font-family: Raleway-Black;
font-size: 30px;
color: #fdb834;
line-height: 1.2;
text-align: center;
padding-bottom: 45px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input {
width: 100%;
position: relative;
border: 1px solid #707070;
border-radius: 2px;
margin-bottom: 34px;
}
.rs1.wrap-input {
width: calc((100% - 40px) / 2);
}
.label-input {
font-family: Raleway-SemiBold;
font-size: 13px;
color: #fdb834;
line-height: 1.5;
text-transform: uppercase;
width: 100%;
padding-bottom: 11px;
}
.input {
display: block;
width: 100%;
background: transparent;
font-family: Raleway-SemiBold;
font-size: 18px;
color: #333333;
line-height: 1.2;
padding: 0 25px;
}
input.input {
height: 35px;
}
textarea.input {
min-height: 150px;
padding-top: 19px;
padding-bottom: 15px;
}
/*---------------------------------------------*/
.focus-input {
position: absolute;
display: block;
width: calc(99% + 1px);
height: calc(98%);
top: -1px;
left: 0px;
pointer-events: none;
border: 2px solid;
border-color: #fdb834;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scaleX(1.1) scaleY(1.3);
-moz-transform: scaleX(1.1) scaleY(1.3);
-ms-transform: scaleX(1.1) scaleY(1.3);
-o-transform: scaleX(1.1) scaleY(1.3);
transform: scaleX(1.1) scaleY(1.3);
}
.input:focus+.focus-input {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-contact-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: -4px;
}
.contact-form-btn {
font-family: Raleway-Bold;
font-size: 16px;
color: #fff;
line-height: 1.2;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 150px;
height: 55px;
border-radius: 27px;
background: #fdb834;
position: relative;
z-index: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 27px;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000;
opacity: 1;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.contact-form-btn:hover:before {
opacity: 0;
}
.cart__link,
.giftcard__link {
margin-right: 40px;
font-size: 1.8rem;
color: #707070;
}
.box3 {
height: 40px;
display: flex;
flex-direction: row;
margin-left: 2%;
}
.nav__bottom {
width: 55%;
justify-content: flex-start;
}
.help {
margin-left: 25px;
margin-right: 10px;
}
.favorite__link,
.help__link {
color: #707070;
}
.fa-user,
.fa-shopping-cart,
.fa-gift,
.fa-heart {
color: #fdb834;
}
.search {
width: 45%;
display: flex;
position: relative;
height: 40px;
justify-content: flex-end;
align-content: flex-end;
margin: 0 2% 0 0;
font-size: 1.8rem;
color: #707070;
}
.search-box {
background: #fff;
height: 10px;
padding: 5px;
border: 1px solid #707070;
border-radius: 2%;
box-shadow: 1px 1px rgb(112, 112, 112, 0.2);
margin-left: 10px;
}
.search-btn {
text-decoration: none;
color: #707070;
font-size: 2rem;
width: 20px;
height: 10px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
font-size: 1.4rem;
transition: 0.4s;
color: #707070;
width: 15rem;
}
::placeholder {
color: rgb(112, 112, 112, 0.7);
font-size: 1.4rem;
}