<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="navbar navbar-default"> <!-- UL --> <ul class="nav navbar-nav navbar-right"> <!-- DROPDOWN --> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notification (<b>2</b>)</a> <!-- DROPDOWN MENU --> <ul class="dropdown-menu notify-drop"> <!-- DROPDOWN TITLE --> <div class="notify-drop-title"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-6">Bildirimler (<b>2</b>)</div> <div class="col-md-6 col-sm-6 col-xs-6 text-right"><a href="" class="rIcon allRead" data-tooltip="tooltip" data-placement="bottom" title="tümü okundu."><i class="fa fa-dot-circle-o"></i></a></div> </div> </div> <!-- END - DROPDOWN TITLE --> <!-- DROPDOWN CONTENT --> <div class="drop-content"> <li> <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="http://placehold.it/45x45" alt=""></div></div> <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="">Ahmet</a> yorumladı. <a href="">Çicek bahçeleri...</a> <a href="" class="rIcon"><i class="fa fa-dot-circle-o"></i></a> <hr> <p class="time">Şimdi</p> </div> </li> <li> <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="http://placehold.it/45x45" alt=""></div></div> <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="">Ahmet</a> yorumladı. <a href="">Çicek bahçeleri...</a> <a href="" class="rIcon"><i class="fa fa-dot-circle-o"></i></a> <p>Lorem ipsum sit dolor amet consilium.</p> <p class="time">1 Saat önce</p> </div> </li> <li> <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="http://placehold.it/45x45" alt=""></div></div> <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="">Ahmet</a> yorumladı. <a href="">Çicek bahçeleri...</a> <a href="" class="rIcon"><i class="fa fa-dot-circle-o"></i></a> <p>Lorem ipsum sit dolor amet consilium.</p> <p class="time">29 Dakika önce</p> </div> </li> <li> <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="http://placehold.it/45x45" alt=""></div></div> <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="">Ahmet</a> yorumladı. <a href="">Çicek bahçeleri...</a> <a href="" class="rIcon"><i class="fa fa-dot-circle-o"></i></a> <p>Lorem ipsum sit dolor amet consilium.</p> <p class="time">Dün 13:18</p> </div> </li> <li> <div class="col-md-3 col-sm-3 col-xs-3"><div class="notify-img"><img src="http://placehold.it/45x45" alt=""></div></div> <div class="col-md-9 col-sm-9 col-xs-9 pd-l0"><a href="">Ahmet</a> yorumladı. <a href="">Çicek bahçeleri...</a> <a href="" class="rIcon"><i class="fa fa-dot-circle-o"></i></a> <p>Lorem ipsum sit dolor amet consilium.</p> <p class="time">2 Hafta önce</p> </div> </li> </div> <!-- END - DROPDOWN CONTENT --> <!-- DROPDOWN FOOTER --> <div class="notify-drop-footer text-center"> <a href=""><i class="fa fa-eye"></i> Tümünü Göster</a> </div> <!-- END - DROPDOWN FOOTER --> </ul> <!-- END DROPDOWN MENU --> </li> <!-- END- DROPDOWN --> </ul> <!-- UL --> </nav> <script> $(function () { $('[data-tooltip="tooltip"]').tooltip() }); </script>

.navbar-default .dropdown-menu.notify-drop { min-width: 330px; background-color: #fff; min-height: 360px; max-height: 360px; } .navbar-default .dropdown-menu.notify-drop .notify-drop-title { border-bottom: 1px solid #e2e2e2; padding: 5px 15px 10px 15px; } .navbar-default .dropdown-menu.notify-drop .drop-content { min-height: 280px; max-height: 280px; overflow-y: scroll; } .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-track { background-color: #F5F5F5; } .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } .navbar-default .dropdown-menu.notify-drop .drop-content::-webkit-scrollbar-thumb { background-color: #ccc; } .navbar-default .dropdown-menu.notify-drop .drop-content > li { border-bottom: 1px solid #e2e2e2; padding: 10px 0px 5px 0px; } .navbar-default .dropdown-menu.notify-drop .drop-content > li:nth-child(2n+0) { background-color: #fafafa; } .navbar-default .dropdown-menu.notify-drop .drop-content > li:after { content: ""; clear: both; display: block; } .navbar-default .dropdown-menu.notify-drop .drop-content > li:hover { background-color: #fcfcfc; } .navbar-default .dropdown-menu.notify-drop .drop-content > li:last-child { border-bottom: none; } .navbar-default .dropdown-menu.notify-drop .drop-content > li .notify-img { float: left; display: inline-block; width: 45px; height: 45px; margin: 0px 0px 8px 0px; } .navbar-default .dropdown-menu.notify-drop .allRead { margin-right: 7px; } .navbar-default .dropdown-menu.notify-drop .rIcon { float: right; color: #999; } .navbar-default .dropdown-menu.notify-drop .rIcon:hover { color: #333; } .navbar-default .dropdown-menu.notify-drop .drop-content > li a { font-size: 12px; font-weight: normal; } .navbar-default .dropdown-menu.notify-drop .drop-content > li { font-weight: bold; font-size: 11px; } .navbar-default .dropdown-menu.notify-drop .drop-content > li hr { margin: 5px 0; width: 70%; border-color: #e2e2e2; } .navbar-default .dropdown-menu.notify-drop .drop-content .pd-l0 { padding-left: 0; } .navbar-default .dropdown-menu.notify-drop .drop-content > li p { font-size: 11px; color: #666; font-weight: normal; margin: 3px 0; } .navbar-default .dropdown-menu.notify-drop .drop-content > li p.time { font-size: 10px; font-weight: 600; top: -6px; margin: 8px 0px 0px 0px; padding: 0px 3px; border: 1px solid #e2e2e2; position: relative; background-image: linear-gradient(#fff,#f2f2f2); display: inline-block; border-radius: 2px; color: #B97745; } .navbar-default .dropdown-menu.notify-drop .drop-content > li p.time:hover { background-image: linear-gradient(#fff,#fff); } .navbar-default .dropdown-menu.notify-drop .notify-drop-footer { border-top: 1px solid #e2e2e2; bottom: 0; position: relative; padding: 8px 15px; } .navbar-default .dropdown-menu.notify-drop .notify-drop-footer a { color: #777; text-decoration: none; } .navbar-default .dropdown-menu.notify-drop .notify-drop-footer a:hover { color: #333; }