Bootstrap Snippet Material Design Like Overflow 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/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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#myModal" data-toggle="modal" data-target="#myModal"><img src="http://empyrianartforms.co/assimilate-template/img/ic_more_vert_white_18dp.png" style="max-height: 24px; ,max-width: 24px;" alt="refresh"/> </a>
                    <a class="navbar-brand" href="index.html"><img src="http://empyrianartforms.co/assimilate-template/img/ic_refresh_white_18dp.png" style="max-height: 24px; ,max-width: 24px;" alt="refresh"/> </a>
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse navbar-menubuilder">
                    <ul class="nav navbar-nav navbar-left">
                        <li>
                            <a href="/">Home </a>
                        </li>
                        <li>
                            <a href="Page-One.html">Page One</a>
                        </li>
                        <li>
                            <a href="Page-Two.html">Page Two</a>
                        </li>
                        <li>
                            <a href="Page-Two.html">Page-Three</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-left">
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
            /*--------------------------------------------------------*/
            /*     Justin Zirpoli                                     */
            /*     Empyrian Art Forms                                 */
            /*     XxblackvelvetxX                                    */
            /*     Main Elements,,,,,,,                               */
            /*     #wahhhhhh comes in waves for days....like wahhhhhh.*/
            /*--------------------------------------------------------*/
            @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
            body{
             font-family: 'Roboto Condensed', sans-serif;   
                
            }
            /**MODAL OVERFLOW MENU**/
.modal-overflow{
    font-family: 'Roboto Condensed', sans-serif;
    position: relative;;
    background: #FFFFFF;
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    max-width:260px;
    max-height:auto;
    border:1px solid #AAA;
    border-bottom:3px solid #BBB;
    margin-top:0px;
    overflow:hidden;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-family: 'Roboto', sans-serif;
    -webkit-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    
}
.modal-overflow ul{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Material Design Like Overflow Menu"
Bootstrap 3.3.0 Snippet by jpolly168

Related: See More

Questions / Comments:

"Material Design Like Overflow Menu" Bootstrap 3.3.0 Snippet by jpolly168

Related: See More

Questions / Comments:

"Material Design Like Overflow Menu"
Bootstrap 3.3.0 Snippet by jpolly168