Bootstrap Snippet Drop Down Menu using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <script src="https://use.fontawesome.com/07b0ce5d10.js"></script>
<div class="container">
    <div class="noti-wrap">
 
 
 <div class="noti__item js-item-menu">
     <i class="fa fa-bell"></i>
     
     <div class="email-dropdown js-dropdown">
    <div class="email__title">
        <p>You have 3 New Emails</p>
    </div>
    <div class="email__item">
        <div class="image img-cir img-40">
            <img src="images/icon/avatar-06.jpg" alt="Cynthia Harvey">
        </div>
        <div class="content">
            <p>Meeting about new dashboard...</p>
            <span>Cynthia Harvey, 3 min ago</span>
        </div>
    </div>
    <div class="email__item">
        <div class="image img-cir img-40">
            <img src="images/icon/avatar-05.jpg" alt="Cynthia Harvey">
        </div>
        <div class="content">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.noti__item {
    position: relative;
    margin-right: 35px;
    display: inline-block;
    cursor: pointer;
}
i {
    font-size: 30px;
    color: #a9b3c9;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    vertical-align: middle;
}
.noti-wrap {
    height: 45px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.show-dropdown .js-dropdown {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Drop Down Menu"
Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Drop Down Menu" Bootstrap 4.1.1 Snippet by sumi9xm

Related: See More

Questions / Comments:

"Drop Down Menu"
Bootstrap 4.1.1 Snippet by sumi9xm