JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="nav_box">

    <div class="nav_box__top_bar">
        <img class="nav_box__logo logo" src="img/logo.png" alt="">

        <div class="nav_box__toggle_dropdown_btn fas">
		Open
        </div>
    </div>



    <div class="nav_box__dropdown">
        <div class="nav_box__dropdown_core">
            <div class="nav_box__nav">
                <div class="nav_box__nav_item">
                    <a href="index.html#especialidades" class="nav_box__nav_link t-link">
                        O que tratamos
                    </a>
                </div>
                <div class="nav_box__nav_item">
                    <a href="sobre.html" class="nav_box__nav_link t-link">
                        Mais sobre nós
                    </a>
                </div>
                <div class="nav_box__nav_item">
                    <a href="contactos.html" class="nav_box__nav_link t-link">
                        Contactos e mapa
                    </a>
                </div>
            </div>


            <div class="nav_box__phone_num_row">

                <a class="nav_box__phone_num_btn cta_btn btn">+351 913 679 488</a>

            </div>

            <div class="nav_box__address_row">
                <div class="nav_box__address">
                    Rua António Gomes Soares Pereira 96<br> 4470-139 MAIA<br> Porto
                </div>

                <div class="nav_box__open_address_in_google_link_row">
                    <a href="" class="nav_box__open_address_in_google_link t-link">Abrir no Google Maps</a>
                </div>
            </div>
        </div>

    </div>

</div>

CSS

/* is base */

.nav_box {
	
}

.nav_box__dropdown {
	overflow: hidden;
}

.nav_box__dropdown_core {
	
}




/* is closed */

.nav_box {
    transition: .3s .6s;
    background-color: transparent;
}

.nav_box__dropdown {
    height: 0;
    transition: .3s .3s;
}

.nav_box__dropdown_core {
    transition: .3s;
    opacity: 0;
    transform: translateY(-10px);
}




/* is open */

html.is-nav_box_open .nav_box {
    transition: .3s;
    padding-left: 1em;
    padding-right: 1em;
    background-color: #222;
}

html.is-nav_box_open .nav_box__dropdown {
    transition: .3s .3s;
    /* height: determined through javascript; */
}

html.is-nav_box_open .nav_box__dropdown_core {
    transition: .3s .6s;
    opacity: 1;
    transform: translateY(0px);
}



/* test */
.nav_box {
    background-color: #777;
}

.nav_box__top_bar {
    height: 30px;
}

JavaScript

var w = window,
    d = document,
    $html = d.documentElement,
    $body = d.body,
    qs = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelector(arg2);
        }

        return d.querySelector(arg1);
    },
    qsa = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelectorAll(arg2);
        }

        return d.querySelectorAll(arg1);
    },
    ael = function($el, evt, cb, uc) {
        if (!$el || !evt || !cb) return;

        if ($el !== w && $el.length) {
            $el.forEach(function($el) {
                $el.addEventListener(evt, cb, uc);
            });

            return true;
        }

        return $el.addEventListener(evt, cb, uc);
    };

function getHeight(el) {
    var s = el.style,
    	h;

    s.position = 'fixed';
    s.bottom = '100%';
    s.left = '100%';
    s.opacity = '0';
    s.display = 'block';
    s.width = el.parentNode.scrollWidth + 'px';

    h = el.scrollHeight + 'px';

    s.width = '';
    s.position = '';
    s.bottom = '';
    s.left = '';
    s.opacity = '';
    s.display = '';

    return h;
}

var $nav_box = qs('.nav_box'),
    $nav_box__toggle_dropdown_btn = qs('.nav_box__toggle_dropdown_btn'),
	height_stylesheet;

ael($nav_box__toggle_dropdown_btn, 'click', function(e) {
    $html.classList.toggle('is-nav_box_open');
});


function createAndAppendHeightStylesheet() {
console.log('appended')
    height_stylesheet = document.createElement("style");
    document.head.appendChild(height_stylesheet);
	
}

function updateHeightInStylesheet() {
    var h = getHeight($nav_box);
    height_stylesheet.innerHTML = "html.is-nav_box_open .nav_box__dropdown { height:" + h + "}";
	console.log('updated')
}

ael(w, 'load', createAndAppendHeightStylesheet)
ael(w, 'load', updateHeightInStylesheet);
ael(w, 'resize', updateHeightInStylesheet);