Home > Software engineering >  Setting A Hamburger Menu So That It Stretches Across The Entire Screen
Setting A Hamburger Menu So That It Stretches Across The Entire Screen

Time：12-22

Below is the code that I've used to create a responsive hamburger menu. I'd like to set the hamburger menu so that when opened it stretches (and is displayed) across the entire screen. I imagine that this would involve editing the CSS, which I have unsuccessfully tried doing.

If anyone has any ideas on how I could have the hamburger menu displayed across the entire screen, I'd appreciate you sharing your knowledge with me. Thank you.

.body {
  background-color: white;
  font-family: sans-serif;
}

.searchbar {
  float: right;
}

.image {
  text-align: center;
}

.setsumei {
  margin-left: 20px;
  margin-right: 20px;
}

.footer {
  width: 100%;
  height: 40px;
  text-align: center;
  border-top: 1px solid black;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -40px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  height: 20px;
}

.site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}

*,
*:before,
*:after {
  padding-left: 0;
  margin: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.cp_cont {
  height: auto;
}


/* menu */

.cp_offcm03 {
  position: relative;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  -webkit-transition: transform 0.3s ease-in;
  transition: transform 0.3s ease-in;
  text-align: center;
  color: black;
  background-color: white;
}

.cp_offcm03 nav,
.cp_offcm03 ul {
  height: 100%;
}

.cp_offcm03 li {
  display: inline-block;
  margin-right: -6px;
}

.cp_offcm03 a {
  display: block;
  padding: 15px 45px;
  margin-bottom: -5px;
  -webkit-transition: background-color .3s ease-in;
  transition: background-color .3s ease-in;
}

.cp_offcm03 a:hover {
  background-color: lightgray;
}


/* menu toggle */

#cp_toggle03 {
  display: none;
}

#cp_toggle03:checked~.cp_offcm03 {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

#cp_toggle03:checked~.cp_container {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.cp_mobilebar {
  display: none;
}


/* content */

.cp_container {
  position: relative;
  top: 0;
  padding: 35px auto;
  -webkit-transition: transform .3s ease-in;
  transition: transform .3s ease-in;
}

.cp_content {
  margin: 0 auto;
  padding: 20px;
  height: 65vh;
  text-align: center;
}

@media (max-width: 1130px)and (min-width: 280px) {
  /* menu */
  .cp_offcm03 {
    position: fixed;
    left: -250px;
    overflow-y: hidden;
    width: 250px;
    height: 100%;
    padding-top: 40px;
    color: black;
    background-color: white;
    z-index: 1000;
  }
  .cp_offcm03 nav {
    background: white;
    border-right: 0.5px solid lightgray;
    margin-left: -210px;
  }
  .cp_offcm03 li {
    display: block;
    margin-right: 0;
  }
  .cp_offcm03 a {
    padding: 20px;
  }
  /* menu toggle */
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  .cp_menuicon {
    display: block;
    position: relative;
    width: 25px;
    height: 100%;
    cursor: pointer;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span {
    display: block;
    position: absolute;
    top: 55%;
    margin-top: -0.3em;
    width: 100%;
    height: 0.2em;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
  }
  .cp_menuicon>span:before,
  .cp_menuicon>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span:before {
    -webkit-transform: translateY(-0.6em);
    transform: translateY(-0.6em);
  }
  .cp_menuicon>span:after {
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }
  #cp_toggle03:checked .cp_mobilebar .cp_menuicon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cp_toggle03:checked .cp_mobilebar span:before,
  #cp_toggle03:checked .cp_mobilebar span:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #cp_toggle03:checked~.cp_offcm03 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #cp_toggle03:checked~.cp_container {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  input:checked~#h-menu_black {
    display: block;
    opacity: .6;
  }
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }
  /* content */
  .cp_container {
    top: 60px;
    height: 92vh;
    text-align: center;
  }
  .noscroll {
    overflow: hidden;
    position: fixed;
  }
}
<div >
  <input id="cp_toggle03" type="checkbox" />

  <div >
    <label for="cp_toggle03" >
            <span></span>
        </label>
  </div>

  <label id="h-menu_black"  for="cp_menuicon"></label>

  <div id="body" ></div>

  <header >
    <nav>
      <ul style="text-align: center; margin-left: 210px; overflow: hidden">
        <li style="border-bottom: 1px solid lightgray"><a href="#">Home</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">Blog</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">About This Website</a></li>
        <li style="border-bottom: 1px solid lightgray"><a href="#">Bibliography</a></li>
      </ul>
    </nav>
  </header>
</div>

CodePudding user response：

It's just a matter of adjusting the menu width and the translation dimension to match. Look into how you can use your browser's document inspector to find styles relevant to your goals.

FYI, you don't need vendor prefixes for transform or transition.

/* Scroll down... */

.body {
  background-color: white;
  font-family: sans-serif;
}

.searchbar {
  float: right;
}

.image {
  text-align: center;
}

.setsumei {
  margin-left: 20px;
  margin-right: 20px;
}

.footer {
  width: 100%;
  height: 40px;
  text-align: center;
  border-top: 1px solid black;
  position: absolute;
  bottom: 0;
  padding: 10px;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -40px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.site-footer,
.page-wrap:after {
  height: 20px;
}

.site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}

*,
*:before,
*:after {
  padding-left: 0;
  margin: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

.cp_cont {
  height: auto;
}


/* menu */

.cp_offcm03 {
  position: relative;
  z-index: 5000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
  height: auto;
  padding-top: 0;
  transition: transform 0.3s ease-in;
  text-align: center;
  color: black;
  background-color: white;
}

.cp_offcm03 nav,
.cp_offcm03 ul {
  height: 100%;
}

.cp_offcm03 li {
  display: inline-block;
  margin-right: -6px;
}

.cp_offcm03 a {
  display: block;
  padding: 15px 45px;
  margin-bottom: -5px;
  transition: background-color .3s ease-in;
}

.cp_offcm03 a:hover {
  background-color: lightgray;
}


/* menu toggle */

#cp_toggle03 {
  display: none;
}

#cp_toggle03:checked~.cp_offcm03 {
  transform: translateX(0);
}

#cp_toggle03:checked~.cp_container {
  transform: translateX(0);
}

.cp_mobilebar {
  display: none;
}


/* content */

.cp_container {
  position: relative;
  top: 0;
  padding: 35px auto;
  transition: transform .3s ease-in;
}

.cp_content {
  margin: 0 auto;
  padding: 20px;
  height: 65vh;
  text-align: center;
}

@media (max-width: 1130px)and (min-width: 280px) {
  /* menu */
  .cp_offcm03 {
    position: fixed;
    left: -100vw; /* <------------------------------------------------ HERE */
    overflow-y: hidden;
    width: 100vw; /* <------------------------------------------------ HERE */
    height: 100%;
    padding-top: 40px;
    color: black;
    background-color: white;
    z-index: 1000;
  }
  .cp_offcm03 nav {
    background: white;
    border-right: 0.5px solid lightgray;
    margin-left: -210px;
  }
  .cp_offcm03 li {
    display: block;
    margin-right: 0;
  }
  .cp_offcm03 a {
    padding: 20px;
  }
  /* menu toggle */
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  .cp_menuicon {
    display: block;
    position: relative;
    width: 25px;
    height: 100%;
    cursor: pointer;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span {
    display: block;
    position: absolute;
    top: 55%;
    margin-top: -0.3em;
    width: 100%;
    height: 0.2em;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
  }
  .cp_menuicon>span:before,
  .cp_menuicon>span:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background-color: black;
    -webkit-transition: transform .3s ease-in;
    transition: transform .3s ease-in;
  }
  .cp_menuicon>span:before {
    -webkit-transform: translateY(-0.6em);
    transform: translateY(-0.6em);
  }
  .cp_menuicon>span:after {
    -webkit-transform: translateY(0.6em);
    transform: translateY(0.6em);
  }
  #cp_toggle03:checked .cp_mobilebar .cp_menuicon {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cp_toggle03:checked .cp_mobilebar span:before,
  #cp_toggle03:checked .cp_mobilebar span:after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #cp_toggle03:checked~.cp_offcm03 {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  #cp_toggle03:checked~.cp_container {
    -webkit-transform: translateX(250px);
    transform: translateX(250px);
  }
  input:checked~#h-menu_black {
    display: block;
    opacity: .6;
  }
  #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
  }
  /* content */
  .cp_container {
    top: 60px;
    height: 92vh;
    text-align: center;
  }
  .noscroll {
    overflow: hidden;
    position: fixed;
  }
}
<div >
  <input id="cp_toggle03" type="checkbox">
  
  <div >
    <label for="cp_toggle03" >
      <span></span>
    </label>
  </div>
  
  <label id="h-menu_black"  for="cp_menuicon"></label>
  
  <div id="body" ></div>

  <header >
    <nav>
      <ul style="text-align: center; margin-left: 210px; overflow: hidden;">

        <li style="border-bottom: 1px solid lightgray;"><a href="#">Home</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="#">Blog</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="#">About This Website</a></li>
        <li style="border-bottom: 1px solid lightgray;"><a href="#">Bibliography</a></li>

Page link：https//www.codepudding.com/Softwareengineering/650406.html

Prev:Get non-null columns in a SQL join
Next:How to clip floated content
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding