CSS transition bootstrap navbar dropdown-menu

Question

i want make dropdown-menu like this site menas first dropdown-menu visible in margin-top 100px and with transition go to top . i use below code but not work for me . sorry for my poor English .

<nav class="navbar navbar-default transparent row" role="navigation">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="">menu1</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">menu1</a></li>
                                        <li><a href="#">menu2</a></li>
                                        <li><a href="#">menu3</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </div><!-- /.navbar-collapse -->
                    </nav>

.navbar-nav li .dropdown-menu{
    width: 160px;
    border-top: 4px solid #90cc00;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    margin-top: 90px;
}

.navbar-nav li:hover .dropdown-menu{
    margin-top: 0px;
}

please share your html code

Naga Sai A
– Naga Sai A

2016-07-26 19:38:13 +00:00
Commented Jul 26, 2016 at 19:38 — Naga Sai A
– Naga Sai A, Commented Jul 26, 2016 at 19:38
my question update . thanks

bnnoor
– bnnoor

2016-07-26 19:44:48 +00:00
Commented Jul 26, 2016 at 19:44 — bnnoor
– bnnoor, Commented Jul 26, 2016 at 19:44

Naga Sai A · Accepted Answer · 2016-07-26 22:08:56Z

To achieve expected result, use below option

HTML:

<nav class="navbar navbar-default transparent row" role="navigation">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-ex1-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="">menu1</a></li>
                                <li class="divider-vertical"></li>
                                <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">menu1</a></li>
                                        <li><a href="#">menu2</a></li>
                                        <li><a href="#">menu3</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </div><!-- /.navbar-collapse -->
                    </nav>

CSS:

.navbar-nav li .dropdown-menu{
    width: 160px;

    margin-top: 90px;
    visibility:hidden;
}

.navbar-nav li:hover .dropdown-menu{
    margin-top: 0px;
    visibility:visible;
      border-top: 4px solid #90cc00;
    border-radius: 0;
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

JS: $('.dropdown').addClass('open');

Codepen - http://codepen.io/nagasai/pen/XKYKgG

Can click and hover and confirm whether looking for same effect ?
check updated codepen- codepen.io/nagasai/pen/XKYKgG Hope this works for you :)

Collectives™ on Stack Overflow

CSS transition bootstrap navbar dropdown-menu

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related