Skip to content

Instantly share code, notes, and snippets.

/Sci-Fi-Neonize-Menu.markdown

Created October 14, 2014 15:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/91e838bcd5407902814d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/91e838bcd5407902814d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Oct 14, 2014.
    7 changes: 7 additions & 0 deletions Sci-Fi-Neonize-Menu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Sci-Fi Neonize Menu
    -------------------


    A [Pen](http://codepen.io/mr_alien/pen/fIxpj) by [Mr. Alien](http://codepen.io/mr_alien) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/mr_alien/pen/fIxpj/license).
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="neonize_me_nu_wrapper">
    <ul class="neonize_me_nu">
    <li><a href="#" class="current_tab">HOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">OUR WORK</a></li>
    <li><a href="#">CONTACT</a></li>
    </ul>
    </div>
    8 changes: 8 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    /* Tried this to design a year back, so thought to push in here, real URL the menu I designed is
    http://projects.decodingweb.com/neonize
    */

    //Make sure you don't copy the codes bitch :) ....
    68 changes: 68 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    @font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    src: local('Orbitron-Light'), local('Orbitron-Regular'), url(http://themes.googleusercontent.com/static/fonts/orbitron/v4/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
    }


    body {
    background-image: url("http://projects.decodingweb.com/neonize/images/bg.jpg");
    }

    .neonize_me_nu_wrapper {
    position: relative;
    width: 1000px;
    margin: auto;
    margin-top: 40px;
    }

    .neonize_me_nu li {
    display: inline-block;
    margin-right: 40px;
    }

    .neonize_me_nu li a {
    color: #FF00DE;
    font-family: 'Orbitron';
    font-size: 35px;
    opacity: .7;
    text-decoration: none;
    outline: 0;
    line-height: 40px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    display: block;
    }

    .neonize_me_nu li a:before,
    .neonize_me_nu li a:after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    -moz-transition: width .5s;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
    background-color: #fff;
    box-shadow: 0 0 10px #fff;
    }

    .neonize_me_nu li a:after {
    float: right;
    }

    .neonize_me_nu li a:hover:before,
    .neonize_me_nu li a:hover:after {
    width: 100%;
    }

    .current_tab,
    .neonize_me_nu li a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px #FF00DE, 0 0 20px #FF00DE, 0 0 30px #FF00DE;
    opacity: 1 !important;
    }