CSS Transition from Display None to Display Block, Navigation with Subnav

  • Home
  • Languages
  • HTML
  • CSS Transition from Display None to Display Block, Navigation with Subnav

Css transition from display none to display block, navigation with subnav

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

The solution...just removed the display properties.

nav.main ul ul {  position: absolute;  list-style: none;  opacity: 0;  visibility: hidden;  padding: 10px;  background-color: rgba(92, 91, 87, 0.9);  -webkit-transition: opacity 600ms, visibility 600ms;  transition: opacity 600ms, visibility 600ms;}nav.main ul li:hover ul {  visibility: visible;  opacity: 1;}
<nav class="main">  <ul>    <li>      <a href="">Lorem</a>      <ul>        <li><a href="">Ipsum</a>        </li>        <li><a href="">Dolor</a>        </li>        <li><a href="">Sit</a>        </li>        <li><a href="">Amet</a>        </li>      </ul>    </li>  </ul></nav>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}
<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

Transitions on the CSS display property

You can concatenate two transitions or more, and visibility is what comes handy this time.

div {  border: 1px solid #eee;}div > ul {  visibility: hidden;  opacity: 0;  transition: visibility 0s, opacity 0.5s linear;}div:hover > ul {  visibility: visible;  opacity: 1;}
<div>  <ul>    <li>Item 1</li>    <li>Item 2</li>    <li>Item 3</li>  </ul></div>

CSS3 transition doesn't work with display property

display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.

- reference

As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Vendor prefixes omitted due to brevity.)

Here is a working demo. Also here is a similar topic on SO.

#header #button {  width:200px;  background:#ddd;  transition: border-radius .3s ease .15s;}
#header #button:hover, #header #button > .content {    border-radius: 0px 0px 7px 7px;}
#header #button:hover > .content {  opacity: 1;  height: 150px;  padding: 8px;    }
#header #button > .content {  opacity:0;  clear: both;  height: 0;  padding: 0 8px;  overflow: hidden;
  -webkit-transition: all .3s ease .15s;  -moz-transition: all .3s ease .15s;  -o-transition: all .3s ease .15s;  -ms-transition: all .3s ease .15s;  transition: all .3s ease .15s;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0px 2px 2px #ddd;  -moz-box-shadow: 0px 2px 2px #ddd;  box-shadow: 0px 2px 2px #ddd;  background: #FFF;}
#button > span { display: inline-block; padding: .5em 1em }
<div id="header">  <div id="button"> <span>This is a Button</span>    <div class="content">      This is the Hidden Div    </div>  </div></div>

CSS, hover one element, affect another with transition

Display property is ON or OFF and can not be used with transitions. Instead use property that can have a range of values like Opacity.

.image-container .afterDim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* CHANGE DISPLAY to OPACITY */
    color: #FFF;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; 
}
.image-container:hover .afterDim {
    opacity: 1; /* CHANGE DISPLAY to OPACITY */
    background: rgba(0, 0, 0, .6);
}

How to slide-out a submenu from under the navigation bar using CSS transition?

Transforming the scale or transitioning the max-height: 0 is a better option for navigational elements.

JSFiddle

If the initial state of the element is "display: none" it is passed over in the DOM which will hide that element (as well as any children) from assistive technology.

Also, you can use a sibling sectors to select .dropdown, instead of overly nesting elements

Adjacent sibling: .dropbtn:hover + .dropdown_content

Hovering Issue With Nav Menu

Your sub-navigation menu is taking up space, even though it is not visible. That is why you can see it whenever you are hovering above it. Adding height:0 to your .subnav-block and then setting it back to auto when hovering, should do the trick. Your css should look something like the one below.

.subnav-block {
  position: static;
  display: block;
  width: 100% !important;
  top: 54px;
  left: 0;
  height: 0;
  overflow: hidden;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.nav:hover > li > .subnav-block {
  height: auto;
  visibility: visible;
  overflow: visible;
}

UPDATE

If you want to add paddings to your sub-navigation menu, setting the height to 0 won't suffice, and you would need to change both the height and the padding when hovering. There is another way, which Hadi77 mentioned, which is setting the default display to none and then change it to block. Just like the example below.

.subnav-block {
  position: static;
  width: 100% !important;
  top: 54px;
  left: 0;
  display: none;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.nav:hover > li > .subnav-block {
  display: block;
}

UPDATE 2

Since display won't let us use transitions, the other workaround would be using a bit of JS. Since it is not much code, it is solid way to achieve this. We would need to remove the CSS hover in this.

JS

const nav = document.querySelectorAll('.nav > li');

nav.forEach(elem => {

  elem.addEventListener('mouseenter', () => {
    const subnav = document.querySelectorAll('.subnav-block');
    subnav.forEach(sub => {
      sub.classList.add('display-block');
      setTimeout( () => { 
        sub.style.opacity = 1;
        sub.style.height = 'auto';
      }, 100);
    });
  });

  elem.addEventListener('mouseleave', () => {
    const subnav = document.querySelectorAll('.subnav-block');
    subnav.forEach(sub => {
      sub.classList.remove('display-block');
      sub.style.opacity = 0;
    });
  });

});

CSS

.subnav-block {
  position: static;
  width: 100% !important;
  top: 54px;
  left: 0;
  display: none;
  opacity: 0;
  height: 0;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.display-block {
  display: block;
}

Navigation - mouseover show / hide submenus - problems using CSS / JQuery

I am adding another answer. Now the lists are aligned. You can increase the hidden time.

$('#menu_toggle').click(function() {
  $(".nav_list").toggle();
  var nav2 = $('#nav-bar2').hasClass("show_nav2");
  $(".subnav").toggle();
  //adjust subnav position as well
  $('.subnav').toggleClass('expanded');

  $('#canvas').toggleClass("canvas");
  $('#nav-bar').toggleClass("show_nav");
  if (nav2) {
    $('#nav-bar2').removeClass("show_nav2");
    $('#canvas').removeClass("canvas");
    $('#canvas').removeClass("canvas2");
  }
});



$('#nav_link_formations').click(function() {
  $('#canvas').toggleClass("canvas");
  $('#canvas').toggleClass("canvas2");
  $('#nav-bar').addClass("show_nav");
  $('#nav-bar2').toggleClass("show_nav2");
});


//show submenu faster
$('.nav li > .subnav').parent().mouseenter(function() {
  let submenu = $(this).children('.subnav');
  $(submenu).css({
    transform: "scaleY(1)",
    transitionDuration: ".3s",
    opacity: "1"
  });
});

//take time to hide
$('.nav li > .subnav').parent().mouseleave(function() {
  let submenu = $(this).children('.subnav');
  $(submenu).css({
    transform: "scaleY(0)",
    transitionDuration: "2.0s",
    opacity: "0"
  });
});

//quickly expand it when user hovers over sub menu
$('.nav li > .subnav').mouseenter(function() {
  $(this).css({
    transform: "scaleY(1)",
    transitionDuration: "0s"
  });
});
$('.nav li > .subnav').parent().hover(function() {
  var submenu = $(this).children('.subnav');
  if ($(submenu).is(':hidden')) {
    $(submenu).show(500);
  }
});
ul {
  list-style: none;
  padding: 10px 20px;
  margin: 0;
}

#news_toggle {
  width: 68px;
  background-color: rebeccapurple;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  float: left
}

#news-sidebar {
  background-color: rebeccapurple;
  color: #fff;
}

#sidebar-nav {
  width: 160px;
}

#canvas {
  float: left;
  padding: 0 1rem;
  transition: .5s;
  padding-left: calc(282px + 2rem);
}

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

#menu_toggle {
  color: lightblue;
  font-size: 1.5rem;
  cursor: pointer
}

.l-navbar {
  float: left;
  left: 68px;
  width: 68px;
  height: 100vh;
  background-color: white;
  border-right: 1px solid rebeccapurple;
  padding: 1rem 1rem 0 0;
  transition: .5s;
}

.l-navbar2 {
  float: left;
  left: -30%;
  width: 224px;
  height: 100vh;
  background-color: grey;
  padding: .5rem 1rem 0 0;
  transition: .5s;
  z-index: -10;
}

#nav-bar2 {
  z-index: -99999;
}

.nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 40px;
  overflow: hidden;
  z-index: 99999;
}

.nav_link {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.nav_link {
  position: relative;
  color: rebeccapurple;
  margin-bottom: 1.5rem;
  transition: .3s
}

.nav_icon {
  font-size: 1.25rem;
}

.show_nav {
  width: 224px;
}

.show_nav2 {
  left: 292px;
}

.show_sidebar {
  left: 0 !important;
}

.canvas {
  position: absolute;
  padding: 0 1rem;
  transition: .5s;
  left: calc(360px + 2rem);
}

.fas {
  color: lightblue
}

.active {
  color: rebeccapurple;
}

.active::before {
  content: '';
  position: absolute;
  right: -20px;
  width: 2px;
  height: 32px;
  background-color: rebeccapurple;
}

.height-100 {
  height: 100vh
}

.dropdown-toggle::after {
  margin-left: 0
}

nav .subnav {
  position: absolute;
  z-index: 99999;
  display: hidden;
  new attributes left: 0px !important;
  margin-left: 10rem;
  padding: 0;
  opacity: 0.0;
  transform: scaleY(0.0);
  /* transition-duration: .5s; */
  /* transition-property: transform, opacity; */
  /* transition-timing-function: ease-out; */
}


/*new rule*/

nav .expanded .subnav {
  left: 100px !important;
}

.nav_list {
  display: none;
  z-index: 4000;
}

li {
  display: flex;
  margin: 0;
  top: 0;
  z-index: 90000;
}

.subnav>ul {
  /* padding-left: 300px; */
  list-style-type: none;
  display: flex;
  top: 0;
  margin-top: 0;
  z-index: 9000;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container-fluid">
      <div class="row flex-nowrap">

        <div id="offcanvas" class="col-auto px-0">


          <div id="news-sidebar" class="collapse collapse-horizontal min-vh-100">
            <div class="news-content">
              news news news
            </div>
          </div>
        </div>

        <div id="maincontent" class="col-auto px-0">

          <div id="news_toggle" data-bs-target="#news-sidebar" data-bs-toggle="collapse" class="min-vh-100">NEWS</div>

          <div class="l-navbar" id="nav-bar">
            <div id="menu_toggle"><i class="fas fa-bars"></i> </div>

            <nav class="nav">
              <div>
                <div class="nav_list">
                  <ul>
                    <li>
                      <a href="#" class="nav_link active" id="nav_link_formations"> <i class="fas fa-graduation-cap"></i>
                        <span class="nav_name">Formations</span> </a>

                      <ul class="subnav">
                        <i class="fas fa-graduation-cap"></i>
                        <span class="nav_name">Formations</span>
                        <li><a href="#" class="sub_nav_link active">Formations 1</a> </li>
                        <li><a href="#" class="sub_nav_link ">Formations 2</a> </li>
                      </ul>

                    </li>
                    <li>
                      <a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a>
                      <ul class="subnav">
                        <li><a href="#" class="sub_nav_link active">Users 1</a> </li>
                        <li><a href="#" class="sub_nav_link ">Users 2</a> </li>
                        <li><a href="#" class="sub_nav_link ">Users 3</a> </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a>
                      <ul class="subnav">
                        <li><a href="#" class="sub_nav_link active">Messages 1</a> </li>
                        <li><a href="#" class="sub_nav_link ">Messages 2</a> </li>
                        <li><a href="#" class="sub_nav_link ">Messages 3</a> </li>
                        <li><a href="#" class="sub_nav_link ">Messages 4</a> </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a>
                      <ul class="subnav">
                        <li><a href="#" class="sub_nav_link active">Bookmark 1</a> </li>
                        <li><a href="#" class="sub_nav_link ">Bookmark 2</a> </li>
                      </ul>
                    </li>

                </div>
            </nav>
            </div>



            <span class="l-navbar2" id="nav-bar2">
            [LOGO]
          </span>

            <div id="canvas">


              <div class="height-100 bg-light">
                <h1>Homepage</h1>
                <h2>What is Lorem Ipsum?</h2>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
                survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
                desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

                <h2>Why do we use it?</h2>
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
                content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
                Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
              </div>

            </div>
          </div>
        </div>
      </div>
  </body>

  </html>
</body>

</html>

Related Topics

Pick Images of Root Folder from Sub-Folder

Chrome Rendering Issue. Fixed Position Anchor with Ul in Body

Css3 Transform Not Working

Img Tag Displays Wrong Orientation

CSS Selector "(A or B) and C"

How to Make a Transparent Canvas in HTML5

How Does One Use the Onerror Attribute of an Img Element

Audio Capturing with HTML5

Convert a SQL Query Result Table to an HTML Table for Email

How to HTML Encode/Escape a String? Is There a Built-In

Space Before Closing Slash

Youtube: How to Present Embed Video with Sound Muted

Can You Take a "Screenshot" of the Page Using Canvas

How to Keep :Active CSS Style After Click a Button

Specifying Content of an Iframe Instead of the Src Attribute to a Page

How to Embed a Swf File in an HTML Page

Correct Way to Use Modernizr to Detect Ie

Allow Specific Tag to Override Overflow:Hidden


Leave a reply



Submit