Template:Team:DukeMenu/CSS

From 2014.igem.org

(Difference between revisions)
Line 37: Line 37:
   box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
   box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
}
}
 +
 +
.demo_container { width:980px; margin:0 auto; }
 +
#demo_top_wrapper { margin:0 0 20px 0; }
 +
#demo_top { height:100px; padding:20px 0 0 0; }
 +
#my_logo { font:70px Georgia, serif; }
 +
 +
/* our menu styles */
 +
#sticky_navigation_wrapper { width:100%; height:50px; }
 +
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
 +
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
 +
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
 +
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
 +
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; }
</style>
</style>
 +
 +
<script>
 +
$(function() {
 +
 +
    // grab the initial top offset of the navigation
 +
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
 +
   
 +
    // our function that decides weather the navigation bar should have "fixed" css position or not.
 +
    var sticky_navigation = function(){
 +
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
 +
       
 +
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
 +
        // otherwise change it back to relative
 +
        if (scroll_top > sticky_navigation_offset_top) {
 +
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
 +
        } else {
 +
            $('#sticky_navigation').css({ 'position': 'relative' });
 +
        } 
 +
    };
 +
   
 +
    // run our function on load
 +
    sticky_navigation();
 +
   
 +
    // and run it again every time you scroll
 +
    $(window).scroll(function() {
 +
        sticky_navigation();
 +
    });
 +
 +
});
 +
</script>
</head>
</head>
Line 61: Line 104:
</div>
</div>
 +
 +
<div id="demo_top_wrapper">
 +
 +
    <!-- a header with a logo just to have some content before the menu -->
 +
    <div id="demo_top">
 +
        <div class="demo_container">
 +
            <div id="my_logo">Our logo</div>
 +
        </div>
 +
    </div>
 +
 +
    <!-- this will be our navigation menu -->
 +
    <div id="sticky_navigation_wrapper">
 +
        <div id="sticky_navigation">
 +
            <div class="demo_container">
 +
                <ul>
 +
                    <li><a href="#" class="selected">HOME</a></li>
 +
                    <li><a href="#">ABOUT US</a></li>
 +
                    <li><a href="#">SERVICES</a></li>
 +
                    <li><a href="#">CLIENTS</a></li>
 +
                    <li><a href="#">PARTNERS</a></li>
 +
                    <li><a href="#">CONTACT</a></li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
</div>
</body>
</body>
</html>
</html>

Revision as of 21:27, 25 July 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeMenu/CSS"