webtechgroups
LightBlog

Banner Link

Showing posts with label css3 transition dropdown onclick. Show all posts
Showing posts with label css3 transition dropdown onclick. Show all posts

Friday, December 22, 2017

Css3 transition dropdown onclick

December 22, 2017 0
Does anyone know how to apply a css3 transition dropdown effect to the navigation-dropdown, since there is no :onclick in css?*

* while keeping navigation-dropdown on an auto height (I don't want a fixed height for the dropdown menu).

Code: (See example for the entire code)

CSS:
<style>
html {
    margin:0;
    padding:0;
}
body {
    font-size:100%;
    font-family:Arial, sans-serif;
    background-color:#ffffff;
    margin:0;
    padding:0;
}
#wrapper {
    float:left;
    position:relative;
    width:640px;
    margin:0;
    padding:20px 50px 20px 50px;
}
#navigation {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
#navigation-sub {
    float:left;
    cursor:pointer;
    color:#ffffff;
    font-size:16px;
    background-color:#69C;
    margin:0;
    padding:6px 15px 7px 15px;
}
#navigation-sub:hover {
    background-color:#C66;
}
#navigation-sub:active {
    background-color:#eeeeee;
}
#navigation-dropdown {
    position: absolute;
    top: 50px;
    background-color:#eeeeee;
    border:#69C 4px solid;
    margin:0;
    padding:15px 15px 15px 30px;
    /*This here*/
    -webkit-transition: 3s ease-out;
    -moz-transition: 3s ease-out;
    -ms-transition: 3s ease-out;
    transition: 3s ease-out;
}
.hide {
    opacity: 0;
    height: 0 !important;
}
#navigation-dropdown ul {
    float:left;
    width:150px;
    list-style:none;
    margin:0;
    padding:0;
}
#navigation-dropdown ul li {
    float:left;
    width:100%;
    font-size:14px;
    line-height:24px;
    margin:0;
    padding:0;
}
#navigation-dropdown ul li a {
    color:#69C;
    text-decoration:none;
}
#navigation-dropdown ul li a:hover {
    text-decoration:underline;
}
#navigation-dropdown ul li a:active {
    color:#dddddd;
}
#navigation-dropdown input {
    float:left;
    cursor:pointer;
    color:#333333;
    font-size:14px;
    font-family:Arial, sans-serif;
}
</style>

Javascript:
<script>
function dropIt() {
    toggleClass(document.getElementById('navigation-dropdown'), "hide");
}

function foldIt() {
    toggleClass(document.getElementById('navigation-dropdown'), "hide");
}

function setHeight() {
    var el = document.getElementById('navigation-dropdown');
    el.style.height = el.clientHeight + "px";
}

var toggleClass = function (el, className) {
    if (el) {
        if (el.className.indexOf(className) != -1) {
            el.className = el.className.replace(className, '');
        } else {
            el.className += ' ' + className;
        }
    }
};


setHeight();


</script>

HTML:

<body>
    <div id="wrapper">
        <div id="navigation">
            <div id="navigation-sub" onclick="dropIt();">Click me</div>
        </div>
        <div id="navigation-dropdown">
            <ul>
                <li><a href="#">link one</a>

                </li>
                <li><a href="#">link two</a>

                </li>
                <li><a href="#">link three</a>

                </li>
                <li><a href="#">link four</a>

                </li>
            </ul>
            <ul>
                <li><a href="#">link five</a>

                </li>
                <li><a href="#">link six</a>

                </li>
                <li><a href="#">link seven</a>

                </li>
                <li><a href="#">link eight</a>

                </li>
            </ul>
            <ul>
                <li><a href="#">link nine</a>

                </li>
                <li><a href="#">link ten</a>

                </li>
                <li><a href="#">link eleven</a>

                </li>
                <li><a href="#">link twelve</a>

                </li>
            </ul>
            <input type="button" value="X" onclick="foldIt()" />
        </div>
    </div>

</body>