One Click New Page Popup with Menu

Wave

Wavy

Text

Effect

Moving

Move

Automatic

Scrollbar

Textbox

Wind

Twinkle

Dropdown

List

Browser

Explorer

Histry

Back

Top

Title

Checkbox

Check

Uncheck

All

Written by @kerixa 15 May 2020

Magic buttons always works! When they are clicked, something special should happen suddenly. For example a whole new page with amazing contents can jumps out and appears to the visitors. The following is an example of such buttons. The pop up page has right side menu and a search box. Amazing!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

body {
  --screen-width: 100vw;
  --screen-height: 100vh;
  
  --nav-text-color: #ffffff;
  --nav-height: 50px;
  --nav-width: 320px;
  --nav-count: 10;
  
  font-family: Montserrat, sans-serif;
  font-size: 16px;
}

.container {
  background-image: linear-gradient(to bottom right, #ff9eaa 0% 65%, #e860ff 95% 100%);
  width: var(--screen-width);
  height: var(--screen-height);
  display: grid;
  place-items: center;
}

.btn {
  color: var(--nav-text-color);
  font-weight: bold;
  width: 180px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 150ms ease-out;
}

.btn-open {
  background-color: #328fff;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 0 rgba(0, 0, 0, 0.3) inset;
}

.btn-open:active, .btn-open:focus {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3) inset;
  transform: translateY(7px);
}

.nav-opener {
  display: none;
}

.nav-opener:checked + .nav {
  transform: scale(1);
}

.nav {
  width: var(--screen-width);
  height: var(--screen-height);
  display: grid;
  grid-template-rows: var(--nav-height) 30% auto;
  grid-template-columns: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0);
  transition: transform 300ms ease;
}

.nav-header {
  background-color: #323232;
  display: flex;
  justify-content: space-between;
}

.nav-links {
  background-color: #484848;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: repeat(var(--nav-count), var(--nav-height));
  grid-template-columns: 100%;
  overflow: auto;
  list-style-type: none;
}

.nav-link {
  color: var(--nav-text-color);
  display: flex;
  align-items: center;
  user-select: none;
}

.nav-link label {
  width: 100%;
  height: 100%;
  padding-left: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.nav-link:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.nav-link:focus, .nav-link:active {
  background-color: rgba(0, 0, 0, 0.30);
}

.nav-images {
  display: flex;
  flex-flow: row wrap;
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  position: relative;
}

.nav-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  transition: all 400ms ease-out;
}

#image1:checked ~ .nav-images > .nav-image {
  transform: translateY(0);
}

#image1:checked ~ .nav-links > .nav-link:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image2:checked ~ .nav-images > .nav-image {
  transform: translateY(-100%);
}

#image2:checked ~ .nav-links > .nav-link:nth-child(2) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image3:checked ~ .nav-images > .nav-image {
  transform: translateY(-200%);
}

#image3:checked ~ .nav-links > .nav-link:nth-child(3) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image4:checked ~ .nav-images > .nav-image {
  transform: translateY(-300%);
}

#image4:checked ~ .nav-links > .nav-link:nth-child(4) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image5:checked ~ .nav-images > .nav-image {
  transform: translateY(-400%);
}

#image5:checked ~ .nav-links > .nav-link:nth-child(5) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image6:checked ~ .nav-images > .nav-image {
  transform: translateY(-500%);
}

#image6:checked ~ .nav-links > .nav-link:nth-child(6) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image7:checked ~ .nav-images > .nav-image {
  transform: translateY(-600%);
}

#image7:checked ~ .nav-links > .nav-link:nth-child(7) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image8:checked ~ .nav-images > .nav-image {
  transform: translateY(-700%);
}

#image8:checked ~ .nav-links > .nav-link:nth-child(8) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image9:checked ~ .nav-images > .nav-image {
  transform: translateY(-800%);
}

#image9:checked ~ .nav-links > .nav-link:nth-child(9) {
  background-color: rgba(0, 0, 0, 0.5);
}

#image10:checked ~ .nav-images > .nav-image {
  transform: translateY(-900%);
}

#image10:checked ~ .nav-links > .nav-link:nth-child(10) {
  background-color: rgba(0, 0, 0, 0.5);
}

.nav-title {
  color: var(--nav-text-color);
  font-weight: bold;
  height: var(--nav-height);
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.btn-nav {
  background-color: rgba(0, 0, 0, 0.35);
}

.btn-nav:active, .btn-nav:focus {
  background-color: rgba(0, 0, 0, 0.7);
}

.btn-nav svg {
  margin-right: 5px;
  display: block;
}

.btn-nav svg path {
  fill: #ef2424;
}

.nav-link-opener {
  display: none;
}

.image-1 {
  background-image: url(https://www.javascriptfreecode.com/files/20-1.jpg);
}

.image-2 {
  background-image: url(https://www.javascriptfreecode.com/files/20-2.jpg);
}

.image-3 {
  background-image: url(https://www.javascriptfreecode.com/files/20-3.jpg);
}

.image-4 {
  background-image: url(https://www.javascriptfreecode.com/files/20-4.jpg);
}

.image-5 {
  background-image: url(https://www.javascriptfreecode.com/files/20-5.jpg);
}

.image-6 {
  background-image: url(https://www.javascriptfreecode.com/files/20-6.jpg);
}

.image-7 {
  background-image: url(https://www.javascriptfreecode.com/files/20-7.jpg);
}

.image-8 {
  background-image: url(https://www.javascriptfreecode.com/files/20-8.jpg);
}

.image-9 {
  background-image: url(https://www.javascriptfreecode.com/files/20-9.jpg);
}

.image-10 {
  background-image: url(https://www.javascriptfreecode.com/files/20-10.jpg);
}

.nav-search-box {
  background-color: #328fff;
  width: 70%;
  height: var(--nav-height);
  display: grid;
  grid-template-columns: auto 90px;
  grid-template-rows: 100%;
  position: absolute;
  top: 30px;
  left: 50%;
  overflow: hidden;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  transform: translateX(-50%);
}

.nav-search-box > input[type="search"],
.nav-search-box > button {
  font-family: inherit;
  width: 100%;
  height: var(--nav-height);
  border: 0;
  outline: 0;
  display: block;
}

.nav-search-box > input[type="search"] {
  background-color: #dedede;
  padding: 0 15px;
  transition: all 150ms ease-out;
}

.nav-search-box > input[type="search"]:focus {
  background-color: #ffffff;
}

.nav-search-box > button {
  color: var(--nav-text-color);
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0);
  transition: all 150ms ease-out;
}

.nav-search-box > button:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

.nav-search-box > button:active {
  background-color: rgba(0, 0, 0, 0.5);
}

@media (min-width: 768px) {
  .nav {
    grid-template-rows: var(--nav-height) auto;
    grid-template-columns: var(--nav-width) auto;
  }
  
  .nav-header {
    grid-column-start: span 2;
  }
}
</style>
<div class="container">
<label class="btn btn-open" for="nav">Open Page</label>
<input type="checkbox" id="nav" class="nav-opener" />
<div class="nav">
<div class="nav-header">
<div class="nav-title">MENU</div>
<label class="btn btn-nav" for="nav">
<svg style="width: 25px; height: 25px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,3H16.3H7.7H5A2,2 0 0,0 3,5V7.7V16.4V19A2,2 0 0,0 5,21H7.7H16.4H19A2,2 0 0,0 21,19V16.3V7.7V5A2,2 0 0,0 19,3M15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4L13.4,12L17,15.6L15.6,17Z" />
</svg>
CLOSE
</label>
</div>
<input type="radio" name="image" id="image1" class="nav-link-opener" checked="checked" />
<input type="radio" name="image" id="image2" class="nav-link-opener" />
<input type="radio" name="image" id="image3" class="nav-link-opener" />
<input type="radio" name="image" id="image4" class="nav-link-opener" />
<input type="radio" name="image" id="image5" class="nav-link-opener" />
<input type="radio" name="image" id="image6" class="nav-link-opener" />
<input type="radio" name="image" id="image7" class="nav-link-opener" />
<input type="radio" name="image" id="image8" class="nav-link-opener" />
<input type="radio" name="image" id="image9" class="nav-link-opener" />
<input type="radio" name="image" id="image10" class="nav-link-opener" />
<ul class="nav-links">
<li class="nav-link"><label for="image1">Home</label></li>
<li class="nav-link"><label for="image2">Company Information</label></li>
<li class="nav-link"><label for="image3">Product Information</label></li>
<li class="nav-link"><label for="image4">Service Information</label></li>
<li class="nav-link"><label for="image5">Delivery</label></li>
<li class="nav-link"><label for="image6">Cat Image</label></li>
<li class="nav-link"><label for="image7">Dog Image</label></li>
<li class="nav-link"><label for="image8">Bird Image</label></li>
<li class="nav-link"><label for="image9">Fish Image</label></li>
<li class="nav-link"><label for="image10">Contact Us</label></li>
</ul>
<div class="nav-images">
<div class="nav-image image-1"></div>
<div class="nav-image image-2"></div>
<div class="nav-image image-3"></div>
<div class="nav-image image-4"></div>
<div class="nav-image image-5"></div>
<div class="nav-image image-6"></div>
<div class="nav-image image-7"></div>
<div class="nav-image image-8"></div>
<div class="nav-image image-9"></div>
<div class="nav-image image-10"></div>
<form class="nav-search-box" action="#">
<input type="search" name="search" placeholder="Your keyword here..." />
<button type="button">Search</button>
</form>
</div>
</div>
</div><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300