Bubble Pop Menu

Developer
Luuk Lamers
Size
4,655 Kb
Views
4,048
  1. Bubble Pop Menu Previews
  2. Bubble Pop Menu HTML Codes
  3. Bubble Pop Menu CSS Codes
  4. Bubble Pop Menu JS Codes

How do I make an bubble pop menu?

An overlayed menu that collapses into a circle.Probably has been done millions of times but I wanted to do one myself.. What is a bubble pop menu? How do you make a bubble pop menu? This script and codes were developed by Luuk Lamers on 22 January 2023, Sunday.

Bubble Pop Menu Previews
IQ Test

Bubble Pop Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bubble Pop Menu</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bubble-menu"> <div class="icon">&#x2261;</div> <nav role='navigation'> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#clients">Clients</a></li> <li><a href="#contactus">Contact Us</a></li> </ul> </nav>
</div>
<div class="content"> <h1>Bubble Pop Menu</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quisquam, molestias optio aliquid nemo aspernatur quasi. Reprehenderit quo sed eligendi, autem repudiandae, nostrum atque doloremque repellat at ratione provident consequuntur facere molestias mollitia temporibus velit magni impedit a sit quasi ab sapiente ex quisquam aliquam! Ipsa ratione, autem facilis quos.</p> <p>Porro a exercitationem natus corporis deleniti! Labore saepe magni quia facere voluptas ea. Nihil quos id maxime ducimus quidem unde minus, consequuntur, illum incidunt delectus blanditiis dolore excepturi distinctio veniam magni consectetur. Odit quae perferendis eum est autem cum perspiciatis non quo neque repudiandae distinctio, eius cumque delectus quisquam error.</p> <p>Sint eum culpa a, quisquam assumenda neque eos expedita mollitia aliquid ipsum distinctio totam cum accusantium debitis voluptas, nobis nam illo, ad veritatis qui sequi. Molestias autem animi veritatis beatae sequi laborum, iure praesentium libero laudantium ipsum, quisquam eos reiciendis quaerat velit nemo eius aliquid! Quaerat necessitatibus cupiditate, facilis placeat.</p> <p>Quam consequatur, consectetur veritatis animi odio doloribus. Quisquam corporis repellendus nisi unde, id saepe nam fugiat repudiandae! Debitis voluptates culpa recusandae, quam expedita enim, pariatur quis mollitia corrupti quidem iusto quod ea, aperiam vero iste vitae ullam. Sequi ut, ullam libero, eligendi atque mollitia sint saepe cupiditate, maxime rerum earum.</p> <p>Perferendis velit distinctio, voluptate ducimus eius fugiat maiores voluptatum labore inventore minus a eligendi vero expedita voluptas sequi eos sed odit dolorum! Vitae quibusdam quisquam culpa doloribus quia aut architecto quae error corporis illo laborum repudiandae, doloremque dolorem hic in excepturi, enim similique odit sapiente totam iste, suscipit alias reprehenderit!</p> <p>Voluptatibus iusto illo error quia vitae maiores amet, ut quo, saepe magnam quam a quae! Provident repudiandae velit distinctio rem blanditiis. Accusamus non sequi perspiciatis provident fuga repudiandae, quasi magnam, illo autem, necessitatibus harum alias atque soluta! Illum pariatur cupiditate animi, dolores quae deserunt dignissimos nam architecto! Dicta, officiis, mollitia.</p> <p>Cupiditate quia ducimus optio! Aliquid inventore, ut voluptates quos quasi odit quae doloribus officiis cumque nulla. Dolorum incidunt tenetur praesentium, labore hic illum, natus asperiores voluptatum cumque totam consectetur, tempore explicabo recusandae delectus saepe enim aut atque vero. Ea vero tempora ex eos laudantium cum obcaecati consequuntur et quibusdam laboriosam.</p> <p>Sunt, doloribus, dolores molestiae tempore unde vitae sed perferendis obcaecati vero optio consectetur amet ratione dolorem aspernatur quas delectus quibusdam voluptates officiis magni. Itaque perferendis odit ullam fuga laborum velit veritatis omnis laboriosam aliquid dicta earum, eaque tempora labore ea repudiandae dolorem quia ipsa ad non optio sapiente eius. Eos.</p> <p>Praesentium obcaecati natus consequatur quam laudantium iusto nisi, distinctio ipsam odio similique! Dolorum animi, ipsum impedit eos? Error iusto inventore numquam quod voluptate nisi impedit labore ab eligendi reiciendis. Nisi at autem magnam quasi maxime laborum aliquid, laudantium ea quisquam dolorum ut omnis voluptatum pariatur atque iure, tenetur eveniet corporis!</p> <p>Placeat repudiandae aperiam quo possimus commodi illum aut voluptas molestias dignissimos sunt ducimus odio laudantium impedit voluptates voluptatibus provident nulla expedita sequi minima doloribus, atque reiciendis ab labore, tempore aliquam. Illum pariatur officiis tenetur, veniam quis eligendi dolorum tempore laboriosam corporis vitae temporibus consequuntur vero quaerat voluptatem impedit commodi placeat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos quisquam, molestias optio aliquid nemo aspernatur quasi. Reprehenderit quo sed eligendi, autem repudiandae, nostrum atque doloremque repellat at ratione provident consequuntur facere molestias mollitia temporibus velit magni impedit a sit quasi ab sapiente ex quisquam aliquam! Ipsa ratione, autem facilis quos.</p> <p>Porro a exercitationem natus corporis deleniti! Labore saepe magni quia facere voluptas ea. Nihil quos id maxime ducimus quidem unde minus, consequuntur, illum incidunt delectus blanditiis dolore excepturi distinctio veniam magni consectetur. Odit quae perferendis eum est autem cum perspiciatis non quo neque repudiandae distinctio, eius cumque delectus quisquam error.</p> <p>Sint eum culpa a, quisquam assumenda neque eos expedita mollitia aliquid ipsum distinctio totam cum accusantium debitis voluptas, nobis nam illo, ad veritatis qui sequi. Molestias autem animi veritatis beatae sequi laborum, iure praesentium libero laudantium ipsum, quisquam eos reiciendis quaerat velit nemo eius aliquid! Quaerat necessitatibus cupiditate, facilis placeat.</p> <p>Quam consequatur, consectetur veritatis animi odio doloribus. Quisquam corporis repellendus nisi unde, id saepe nam fugiat repudiandae! Debitis voluptates culpa recusandae, quam expedita enim, pariatur quis mollitia corrupti quidem iusto quod ea, aperiam vero iste vitae ullam. Sequi ut, ullam libero, eligendi atque mollitia sint saepe cupiditate, maxime rerum earum.</p> <p>Perferendis velit distinctio, voluptate ducimus eius fugiat maiores voluptatum labore inventore minus a eligendi vero expedita voluptas sequi eos sed odit dolorum! Vitae quibusdam quisquam culpa doloribus quia aut architecto quae error corporis illo laborum repudiandae, doloremque dolorem hic in excepturi, enim similique odit sapiente totam iste, suscipit alias reprehenderit!</p> <p>Voluptatibus iusto illo error quia vitae maiores amet, ut quo, saepe magnam quam a quae! Provident repudiandae velit distinctio rem blanditiis. Accusamus non sequi perspiciatis provident fuga repudiandae, quasi magnam, illo autem, necessitatibus harum alias atque soluta! Illum pariatur cupiditate animi, dolores quae deserunt dignissimos nam architecto! Dicta, officiis, mollitia.</p> <p>Cupiditate quia ducimus optio! Aliquid inventore, ut voluptates quos quasi odit quae doloribus officiis cumque nulla. Dolorum incidunt tenetur praesentium, labore hic illum, natus asperiores voluptatum cumque totam consectetur, tempore explicabo recusandae delectus saepe enim aut atque vero. Ea vero tempora ex eos laudantium cum obcaecati consequuntur et quibusdam laboriosam.</p> <p>Sunt, doloribus, dolores molestiae tempore unde vitae sed perferendis obcaecati vero optio consectetur amet ratione dolorem aspernatur quas delectus quibusdam voluptates officiis magni. Itaque perferendis odit ullam fuga laborum velit veritatis omnis laboriosam aliquid dicta earum, eaque tempora labore ea repudiandae dolorem quia ipsa ad non optio sapiente eius. Eos.</p> <p>Praesentium obcaecati natus consequatur quam laudantium iusto nisi, distinctio ipsam odio similique! Dolorum animi, ipsum impedit eos? Error iusto inventore numquam quod voluptate nisi impedit labore ab eligendi reiciendis. Nisi at autem magnam quasi maxime laborum aliquid, laudantium ea quisquam dolorum ut omnis voluptatum pariatur atque iure, tenetur eveniet corporis!</p> <p>Placeat repudiandae aperiam quo possimus commodi illum aut voluptas molestias dignissimos sunt ducimus odio laudantium impedit voluptates voluptatibus provident nulla expedita sequi minima doloribus, atque reiciendis ab labore, tempore aliquam. Illum pariatur officiis tenetur, veniam quis eligendi dolorum tempore laboriosam corporis vitae temporibus consequuntur vero quaerat voluptatem impedit commodi placeat.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bubble Pop Menu - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { background: white; color: black; font-family: 'San Francisco', Helvetica Neue, Helvetica, Arial, sans-serif; width: 100%; height: 100%; font-size: 100%; position: relative;
}
a { color: inherit; text-decoration: none;
}
.bubble-menu { background: black; width: 2em; height: 2em; overflow: hidden; border-radius: 50%; position: fixed; left: 1em; top: 1em; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.bubble-menu .icon { cursor: pointer; font-size: 2em; width: 1em; height: 1em; margin: 0; color: white; text-align: center; line-height: 1; position: relative; z-index: 1001;
}
.bubble-menu .icon:hover { background: rgba(255, 255, 255, 0.1);
}
.bubble-menu nav { color: white; font-size: 0; line-height: 2; opacity: 0; text-align: center; width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.bubble-menu nav ul { list-style: none; margin: 0; padding: 0;
}
.bubble-menu nav a { padding: 0.5em 1em;
}
.bubble-menu.opened { border-radius: 0; left: 0; top: 0; width: 100%; height: 100%;
}
.bubble-menu.opened .icon { margin: 0.5em 0 0 0.5em;
}
.bubble-menu.opened nav { font-size: 2em; opacity: 1;
}
.content { max-width: 65ch; margin: 2em auto; padding: 2em;
}
.content p { line-height: 1.35; margin: 0 0 1em 0;
}

Bubble Pop Menu - Script Codes JS Codes

$(".bubble-menu .icon").on("click", function(){ $(".bubble-menu").toggleClass("opened");
})
Bubble Pop Menu - Script Codes
Bubble Pop Menu - Script Codes
Home Page Home
Developer Luuk Lamers
Username xaddict
Uploaded January 22, 2023
Rating 3
Size 4,655 Kb
Views 4,048
Do you need developer help for Bubble Pop Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Luuk Lamers (xaddict) Script Codes
Name
Random Astroids
Progress circle
Big Chat
CSS Hex Color Clock
Individual Element rotation
Isometric css island
SVG animated patterns
Continuum logo in pure css
Responsive off-canvas dual-side navigation without transforms
Lazyload with SVG
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!