logo DevAnswer - Developers Answer

Several examples of menu effects in hover mode

9th February

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
 @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700|Raleway:400,300,700);

    @font-face {
        font-family: 'codropsicons';        
        font-weight: normal;
        font-style: normal;
    }

    .a {
        text decoration: none;
    }

    .container > header,
    .codrops-top {
        font-family: 'Lato', Arial, sans-serif;
    }

    .container > header {
        margin: 0 auto;
        padding: 2em;
        text-align: center;
        color: #89867e;
    }

        .container > header h1 {
            font-size: 3em;
            line-height: 1.3;
            margin: 0;
            font-weight: 500;
        }

        .container > header span {
            display: block;
            font-size: 60%;
            color: #ceccc6;
            padding: 0 0 0.6em 0.1em;
        }

    /* To Navigation Style */
    .codrops-top {
        background: #fff;
        background: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        width: 100%;
        font-size: 0.69em;
        line-height: 2.2;
    }

        .codrops-top a {
            text-decoration: none;
            padding: 0 1em;
            letter-spacing: 0.1em;
            color: #888;
            display: inline-block;
        }

            .codrops-top a:hover {
                background: rgba(255,255,255,0.95);
                color: #716d62;
            }

        .codrops-top span.right {
            float: right;
        }

            .codrops-top span.right a {
                float: left;
                display: block;
            }

    .codrops-icon:before {
        font-family: 'codropsicons';
        margin: 0 4px;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

    .codrops-icon-drop:before {
        content: "\e001";
    }

    .codrops-icon-prev:before {
        content: "\e004";
    }

    .container > section {
        margin: 0 auto;
        padding: 3em 1em;
        text-align: center;
    }

    .color-1 {
        background: #435a6b;
    }

    .color-2 {
        background: #f39c12;
    }

    .color-3 {
        background: #2ac56c;
    }

    .color-4 {
        background: #0e83cd;
    }

    .color-5 {
        background: #cd4436;
    }

    .color-6 {
        background: #f19f0f;
    }

    .color-7 {
        background: #3fa46a;
    }

    .color-8 {
        background: #ecf0f1;
    }

    .color-9 {
        background: #9e487f;
    }

    .color-10 {
        background: #16a085;
    }

    .color-11 {
        background: #aab7b7;
    }

    @media screen and (max-width: 5em) {

        .codrops-icon span {
            display: none;
        }
    }

    *,
    *:after,
    *::before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body {
        font-family: 'Raleway', sans-serif;
    }

    nav a {
        position: relative;
        display: inline-block;
        margin: 15px 15px;
        outline: none;
        color: #fff;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 100;
        text-shadow: 0 0 1px rgba(255,255,255,0.3);
        font-size: 1em;
    }

        nav a:hover,
        nav a:focus {
            outline: none;
        }

    /* Effect 1: Brackets */
    .cl-effect-1 a::before,
    .cl-effect-1 a::after {
        display: inline-block;
        opacity: 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
        -moz-transition: -moz-transform 0.3s, opacity 0.2s;
        transition: transform 0.3s, opacity 0.2s;
    }

    .cl-effect-1 a::before {
        margin-right: 10px;
        content: '[';
        -webkit-transform: translateX(20px);
        -moz-transform: translateX(20px);
        transform: translateX(20px);
    }

    .cl-effect-1 a::after {
        margin-left: 10px;
        content: ']';
        -webkit-transform: translateX(-20px);
        -moz-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    .cl-effect-1 a:hover::before,
    .cl-effect-1 a:hover::after,
    .cl-effect-1 a:focus::before,
    .cl-effect-1 a:focus::after {
        opacity: 1;
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);
    }
    /* Effect 3: bottom line slides/fades in */
    .cl-effect-3 a {
        padding: 8px 0;
    }

        .cl-effect-3 a::after {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 4px;
            background: rgba(0,0,0,0.1);
            content: '';
            opacity: 0;
            -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: opacity 0.3s, -moz-transform 0.3s;
            transition: opacity 0.3s, transform 0.3s;
            -webkit-transform: translateY(10px);
            -moz-transform: translateY(10px);
            transform: translateY(10px);
        }

        .cl-effect-3 a:hover::after,
        .cl-effect-3 a:focus::after {
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            transform: translateY(0px);
        }
        /* Effect 4: bottom border enlarge */
    .cl-effect-4 a {
        padding: 0 0 10px;
    }

        .cl-effect-4 a::after {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: 1px;
            background: #fff;
            content: '';
            opacity: 0;
            -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
            -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
            transition: height 0.3s, opacity 0.3s, transform 0.3s;
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            transform: translateY(-10px);
        }

        .cl-effect-4 a:hover::after,
        .cl-effect-4 a:focus::after {
            height: 5px;
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            transform: translateY(0px);
        }

    /* Effect 5: same word slide in */
    .cl-effect-5 a {
        overflow: hidden;
        padding: 0 4px;
        height: 1em;
    }

        .cl-effect-5 a span {
            position: relative;
            display: inline-block;
            -webkit-transition: -webkit-transform 0.3s;
            -moz-transition: -moz-transform 0.3s;
            transition: transform 0.3s;
        }

            .cl-effect-5 a span::before {
                position: absolute;
                top: 100%;
                content: attr(data-hover);
                font-weight: 700;
                -webkit-transform: translate3d(0,0,0);
                -moz-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0);
            }

        .cl-effect-5 a:hover span,
        .cl-effect-5 a:focus span {
            -webkit-transform: translateY(-100%);
            -moz-transform: translateY(-100%);
            transform: translateY(-100%);
        }
</style>

</head>
<body>
<div class="container">      
    <section class="color-1">
        <nav class="cl-effect-1">
            <a href="#">File</a>
            <a href="#">Edit</a>
            <a href="#">View</a>
            <a href="#">Favourites</a>
            <a href="#">Tools</a>
            <a href="#">Help</a>
        </nav>
    </section>
    <section class="color-6">
        <nav class="cl-effect-3">
            <a href="#">File</a>
            <a href="#">Edit</a>
            <a href="#">View</a>
            <a href="#">Favourites</a>
            <a href="#">Tools</a>
            <a href="#">Help</a>
        </nav>
    </section>
    <section class="color-7">
        <nav class="cl-effect-4">
            <a href="#">File</a>
            <a href="#">Edit</a>
            <a href="#">View</a>
            <a href="#">Favourites</a>
            <a href="#">Tools</a>
            <a href="#">Help</a>
        </nav>
    </section>
    <section class="color-5">
        <nav class="cl-effect-5">
            <a href="#"><span data-hover="Seraglio">Seraglio</span></a>
            <a href="#"><span data-hover="Sumptuous">Sumptuous</span></a>
            <a href="#"><span data-hover="Scintilla">Scintilla</span></a>
            <a href="#"><span data-hover="Palimpsest">Palimpsest</span></a>
            <a href="#"><span data-hover="Assemblage">Assemblage</span></a>
        </nav>
    </section>  
</div><!-- /container --><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>                        



Other Codes