Skip to content

Instantly share code, notes, and snippets.

@vjsolanki

vjsolanki/fab-to-tab.markdown

Created October 16, 2019 11:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vjsolanki/963e200459ac786e1c9832c27ce5df2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vjsolanki/963e200459ac786e1c9832c27ce5df2c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. vjsolanki created this gist Oct 16, 2019.
    7 changes: 7 additions & 0 deletions fab-to-tab.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Fab to tab
    ----------
    Fab button that expands to a Tab menu

    A [Pen](https://codepen.io/Hylix/pen/WQBZwe) by [Dirk-Jan](https://codepen.io/Hylix) on [CodePen](https://codepen.io).

    [License](https://codepen.io/Hylix/pen/WQBZwe/license).
    17 changes: 17 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    <div class="wrap">
    <h1>Fab to tab</h1>

    <p>Inspired by <a href="https://dribbble.com/shots/2366718-Fab-Animation" target="_blank">Georg Bednorz</a></p>
    </div>
    <div class="menu-button">
    <div class="minified"><i class="mdi mdi-arrow-expand"></i></div>
    <div class="content">
    <span class="tab active"><i class="mdi mdi-clippy"></i></span>
    <span class="tab"><i class="mdi mdi-android"></i></span>
    <span class="tab"><i class="mdi mdi-trophy-outline"></i></span>
    <span class="tab"><i class="mdi mdi-emoticon-devil"></i></span>
    <span class="tab close"><i class="mdi mdi-close"></i></span>
    </div>
    </div>

    <footer></footer>
    17 changes: 17 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    $('.menu-button').on('click', function() {
    $(this).addClass('expanded');
    $('.tab').removeClass('active');
    $(this).find('.tab').first().addClass('active');
    });

    $('.tab').on('click', function(e) {
    e.stopPropagation();
    $('.tab').removeClass('active');
    $(this).addClass('active');
    });

    $('.close').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).closest('.menu-button').removeClass('expanded');
    });
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    102 changes: 102 additions & 0 deletions style.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,102 @@
    @import url(https://fonts.googleapis.com/css?family=Roboto:400,300)
    @import url(https://cdn.materialdesignicons.com/1.3.41/css/materialdesignicons.min.css)

    $speed: 0.5

    .wrap
    margin: 0 auto
    width: 200px
    text-align: center
    color: white
    text-shadow: 1px 1px 5px rgba(0,0,0,.3)

    body, html
    padding: 0
    margin: 0
    background: #455A64
    box-sizing: border-box
    font-family: 'Roboto', sans-serif
    padding-bottom: -50px

    *, *:before, *:after
    box-sizing: inherit

    a
    text-decoration: none
    color: white
    border-bottom: 1px dashed rgba(255,255,255,.5)
    &:hover
    text-shadow: 1px 1px 5px #000000

    i
    color: #73BDAD

    .menu-button
    width: 50px
    height: 50px
    border-radius: 50px
    background: white
    position: fixed
    bottom: 65px
    right: 15px
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25)
    cursor: pointer
    color: white
    transition: all $speed*1s cubic-bezier(.42, 0, 0, 1)
    text-align: center
    line-height: 53px
    font-size: 25px
    &:hover
    background: #ddd
    box-shadow: 0 5px 15px 0 rgba(0,0,0,0.4)
    .content
    width: 100%
    visibility: hidden
    opacity: 0
    transition: all 0 ease
    span
    border-top: 5px solid transparent
    flex-grow: 5
    height: 65px
    line-height: 60px
    &.active
    border-top: 5px solid #73BDAD


    &.close
    flex-grow: 1
    i
    color: #FF5252
    .minified
    display: block
    &.expanded
    width: 100vw
    height: 65px
    right: 0
    bottom: 50px
    border-radius: 0
    background: white

    .minified
    display: none
    .content
    display: flex
    visibility: visible
    opacity: 1
    transition: all 1s ease


    footer
    height: 50px
    width: 100%
    bottom: 0
    position: fixed
    background: black

    @keyframes expand
    0%
    border-radius: 50px
    50%
    border-radius: 5px
    100%
    border-radius: 0