CODEWITHSUNDEEP
javascripthtmlcss
Nicolás Villar
Nicolás Villar

Reputation: 119

How to cut exceeded content of div inside another div?

I'm trying to create a "bubble" which gets bigger in order to change its parent color with a nice animation. I like my approach, but I only need to put it inside the parent div. This is what I have:

HTML

<html>
<body>
  <div class="nav-menu" style="top: -64px;">
    <div class="test"></div>
    <div class="brand" onclick="test();">
      <h1>App</h1>
    </div>
    <ul class="menu-list">
      <li class="menu-item"><a href="#">Item</a></li>
    </ul>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

* {
  margin: 0;
  padding: 0;
}

.nav-menu {
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    background-color: #B67171;
    color: white;
    position: fixed;
    width: 100%;
    transition: background-color .5s, top .2s;
}

.test {
    background-color: blue;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    transform: scale(0) translate(-50%, -50%);
    transform-origin: top left;
    transition: transform .25s;
}

.nav-menu .brand h1 {
    margin: 0;
    padding: 0;
    line-height: 64px;
    font-family: 'Satisfy', cursive;
}

.nav-menu .menu-list {
    list-style: none;
    margin: 0;
}

.nav-menu .menu-list a {
    display: inline-block;
    margin: 0;
    padding: 0 16px;
    line-height: 64px;
    font-size: 21px;
    vertical-align: middle;
    transition: background-color .2s;
    color: white;
    text-decoration: none;
}

.nav-menu .menu-list a:hover {
    background-color: #D8C292;
}

(And a .js just for testing)

let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });

var showing = false;
function test () {
    document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
    showing = !showing;
}

Here you have a demo in which you can press the "App" text and it would scale the "bubble" just a little bit. I want to remove the following stuff: enter image description here

Can anybody give me a hint? However if you know any better solution for this "feature", I will appreciate it. Thank you in advance!

Upvotes: 0

Views: 793

Answers (4)

Babak Majdy
Babak Majdy

Reputation: 55

use overflow: hidden; in style of first <div>

Upvotes: 0

Nogard
Nogard

Reputation: 309

Simply add overflow: hidden; to your div with class nav-menu. Here is your edited example: https://jsfiddle.net/4r1n2cux/2/

Upvotes: 0

Dawid
Dawid

Reputation: 171

Add to .navmenu property overflow

DOC: overflow

nav-menu {
   ...
   overflow: hidden;
}

Upvotes: 0

Aryan Twanju
Aryan Twanju

Reputation: 2516

Adding overflow:hidden property to your navigation div would work. Try this code.

.nav-menu {
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    background-color: #B67171;
    color: white;
    position: fixed;
    width: 100%;
    transition: background-color .5s, top .2s;
    overflow: hidden;
}

Upvotes: 1

Related Questions