A Pen by Cameron Banowsky.

animated-navigation-scheme.markdown

animated navigation scheme

trying to get media playback functionality through side menu bar as well...

playing around with semantic ui

A Pen by Cameron Banowsky on CodePen.

License.

index.html

<div class="container">
<div class="ui transparent inverted menu">
  <a class="item">
     <div class="ui full width animated launch basic button">
       <div class="visible content">
         <i class="list icon"></i>
       </div>
       <div class="hidden content">
         menu
      </div>
    </div>
    </a>
    <a class="item">
     <div class="ui full width animated launch basic button">
       <div class="visible content">
         <i class="lab icon"></i>
       </div>
       <div class="hidden content">
         the lab
      </div>
    </div>
  </a>
  
     <a class="item">
     <div class="ui full width animated launch basic button">
       <div class="visible content">
         <i class="bitcoin icon"></i>
       </div>
       <div class="hidden content">
          coin me
       </div>
    </div>
    </a>
    <a class="right menu item">
      <i class="teal twitter icon"></i>
  </a>
  <a class="right menu item">
      <i class="blue facebook icon"></i>
  </a>
  <a class="right menu item">
      <i class="github icon"></i>
  </a>
   <a class="right menu contact button item">
      <i class="mail icon"></i>
  </a>
  </div>
  <div class="ui right vertical sidebar menu" style="background-color: #ecf0f1">
    <a class="item">
      Updates <span class="ui label">213</span>
    </a>
    <div class="ui divider"></div>
    <a class="item">
      Play
       <i class="play icon"></i>
    </a>
    <a class="item">
        Pause
      <i class="pause icon"></i>
    </a>
    <a class="item">
 Shuffle
      <i class="shuffle icon"></i>
    </a>
    

    <a class="toggle button item">
      now playing
      <i class="music icon"></i>
    </a>
  </div>

<div class="container">

  <div class="ui bottom sidebar menu">
    <div class="ui hide buddon">
      <i class="hide icon"></i>
    </div>
  <a class="item">  
    <i class="question icon"></i>
  </a>
</div>
</div>
<div class="ui modal">
  <a class="ui tiny black close">x</a>
  <div class="ui form">
  <div class="container">
  <div class="two fields">
    <div class="field">
      <label>First Name</label>
      <input placeholder="First Name" type="text">
    </div>
    <div class="field">
      <label>Last Name</label>
      <input placeholder="Last Name" type="text">
    </div>
  </div>
  <div class="field">
    <label>Message</label>
    <textarea></textarea>
    <input type="text">
  </div>
    <div class="ui checkbox">
    <label>I agree to sign my freedom and life over to the NSA</label>
    </div>
  </div>
  <div class="ui inverted submit button">Submit</div>
</div>
</div>
<div class="inverted ui segment">
This is basically an experiment
</div>
<div class="ui segment">
  using some elements from of semantic ui
 </div>
<div class="ui inverted segment">
  Hope you enjoy.
  </div>
<script>
  $('.ui.modal')
  .modal('show')
;
 </script>

script.js

$(document)
  .ready(function() {

    $('.filter.menu .item')
      .tab()
    ;

    $('.ui.rating')
      .rating({
        clearable: true
      })
    ;

    $('.right.sidebar')
      .sidebar('attach events', '.launch.button')
    ;
    $('.bottom.sidebar')
      .sidebar('attach events', '.toggle.button')
    ;

    $('.ui.dropdown')
      .dropdown()
    ;

  })
;
$('.toggle.button')
  .removeClass('true')
;
$('.ui.modal')
  .modal('attach events', '.contact.button')
;

style.css

body {
-webkit-transition: margin .3s ease,-webkit-transform .3s ease;
 transition: margin .1s ease,transform .3s ease;
 background: #333;
}
.segment {
   font-family: 'blackout2_am';
}
.item {
  font-family: 'blackout2_am';
  }
@font-face {
  font-family: Icons;
  src: url('http://commondatastorage.googleapis.com/codecdcss%2Fwebfonts%2Ficons.eot');
  src: url(http://commondatastorage.googleapis.com/codecdcss%2Fwebfonts%2Ficons.eot?#iefix) format('embedded-opentype'),url('http://commondatastorage.googleapis.com/codecdcss%2Fwebfonts%2Ficons.woff') format('woff'),url(http://commondatastorage.googleapis.com/codecdcss%2Fwebfonts%2Ficons.ttf) format('truetype'),url(http://commondatastorage.googleapis.com/codecdcss%2Fwebfonts%2Ficons.svg) format('svg');
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}
@font-face {
    font-family: 'blackout2_am';
    src: url('https://storage.cloud.google.com/codecdcss%2Fwebfonts%2Fblackout-midnight-webfont.woff?response-content-disposition=attachment;%20filename=blackout-midnight-webfont.eot');
    src: url('https://storage.cloud.google.com/codecdcss%2Fwebfonts%2Fblackout-midnight-webfont.woff?response-content-disposition=attachment;%20filename=blackout-2am-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://storage.cloud.google.com/codecdcss%2Fwebfonts%2Fblackout-midnight-webfont.woff?response-content-disposition=attachment;%20filename=blackout-2am-webfont.woff') format('woff'),
         url('https://storage.cloud.google.com/codecdcss%2Fwebfonts%2Fblackout-midnight-webfont.woff?response-content-disposition=attachment;%20filename=blackout-2am-webfont.ttf') format('truetype'),
         url('https://storage.cloud.google.com/codecdcss%2Fwebfonts%2Fblackout-midnight-webfont.woff?response-content-disposition=attachment;%20filename=blackout-2am-webfont.svg#blackout2_am') format('svg');
    font-weight: normal;
    font-style: normal;

}
.modal {
  background: #333;
  
}


/*******************************
          Responsive
*******************************/

@media only screen and (max-width : 1000px) {
  feed {
    float: none;
    margin-bottom: 0.5em;
  }
}

@media only screen and (max-width : 1250px) {
.left.column > .menu .item {
    font-size: 1rem;
  }
}

@media only screen and (max-width : 450px) {
  .item {
    font-family: 'blackout2_am';
    font-size: 0.15em;
    width: auto;
	  float: none;
  }
  .sidebar {
	  width: auto;
	  float: none;
  .modal {
    width: auto;
    
  }  
}