Team:NTNU Trondheim/Test

From 2012.igem.org

Revision as of 14:03, 9 August 2012 by Oyas (Talk | contribs)

Stick the menu to the top of the page on scroll down

« Return to all random blog posts

02
Feb 2011

Stick the menu to the top of the page on scroll down

Just a little something I wanted to try. Scroll down the page and watch the menu above stick to the top so it's always accessible. 

Here's the code used:

 

<script type="text/javascript">
var fixed_menu_hidden = true;
function dtbaker_scroll(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop>80){
        if(fixed_menu_hidden){
            $('#fixednav').fadeIn();
            fixed_menu_hidden = false;
        }
    }else{
        $('#fixednav').fadeOut();
        fixed_menu_hidden = true;
    }
}
window.onscroll = dtbaker_scroll;
$(function(){
    $('body').prepend('<div id="fixednav"><div></div></div>');
    $('#fixednav div').html($('#navigation ul').clone());
});
</script>
<style type="text/css">
#fixednav{
    position:fixed; 
    left:0; 
    right:0; 
    top:0; 
    height:39px; 
    background:#13B8D6; 
    display:none; 
    z-index:300;
}
#fixednav div{
    width:994px;
    margin:0 auto;
}
#fixednav ul{
    list-style:none;
    margin:0 0 0 110px;
    padding:0;
}
#fixednav ul li{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
}
#fixednav ul li a{
    display:block;
    margin:0;
    padding:12px 13px 8px 13px;
    float:left;
    height:19px;
    border-left:1px solid #84daea;
    border-right:1px solid #15a1bb;
    font-family: Cuprum, Helvetica, 'Helvetica Neue', arial;
    font-size: 1.4em;
    text-transform:uppercase;
    text-decoration:none;
    color:#FFF;
}
#fixednav ul li a.selected{
    height:24px !important;
    background:#15a1bb url('/new/images/menu_arrow_down.gif') no-repeat center bottom !important;
    border-right:none;
    border-left:none;
    padding-left:14px;
    padding-right:14px;
}
#fixednav ul li a:hover{
    background:#15a1bb;
    height:19px;
    text-decoration:underline;
}
#fixednav ul li.first a{
    border-left:none;
    padding-left:14px;
}
#fixednav ul li.last a{
    border-right:none;
    padding-right:14px;
}
</style>

 

 

Comments:
Comments
  1. awesome :) well done on the site guys!



Leave a Comment

Yes, send me an email when a new comment is posted.

The avatars shown next to comments are Gravatars. Click here to get a Gravatar account for free and any other site that supports it will show your avatar too!

Ultimate Client Manager:

Ultimate Client Manager - Pro Edition! - PHP Open Source
PRO EDITION! Just launched!

The Ultimate Client Manager allows you to track all your customers, projects, PDF invoices and customer websites details.
LOTS MORE features listed here.

Sell your Products on Facebook

Facebook Tab E-Commerce Wordpress
Facebook Jigoshop E-Commerce Plugin

This simple plugins lets you sell your products to your Facebook Fans straight from your Facebook Page. Click here to read more and see a demo.

Newsletter System
PHP Newsletter System

This PHP newsletter system is a simple solution for sending emails out via your website. People can subscribe through your site, and you can track who opens which email. More features listed here.

View Demo Code Canyon Newsletter System Download

WordPress Bulk Emails:

Wordpress Newsletter System
WordPress Email Newsletter Campaign Plugin

This PHP WordPress Plugin is a simple solution for sending bulk emails via your blog. People can subscribe through your blog, and you can track who opens which email. More features listed here.

View Demo CodeCanyon WordPress Email Newsletter Plugin

Browse our Themes:

  • 1

    Pink HTML

    This is a stand alone Pink HTML shop website. You can use this template with any shopping cart software of your choice.
  • 2

    White HTML

    This is a stand alone White HTML shop website. You can use this template with any shopping cart software of your choice.
  • 3

    Pink PHP Shop

    This is a Pink PHP shop website. This code has been split into easy to use header/footer PHP files. Includes a bonus basic php shopping cart. Great for anyone with PHP knowledge.
  • 4

    White PHP Shop

    This is a White PHP shop website. This code has been split into easy to use header/footer PHP files. Includes a bonus basic php shopping cart. Great for anyone with PHP knowledge.
  • 5

    Kids HTML Website Template

  • 6

    Kids - Grass Footer

  • 7

    Kids Website - Sand / Beach

  • 8

    Kids - Underwater

  • 9

    Kids Toys - no footer

  • 10

    HTML Template

  • 11

    HTML Template

  • 12

    Brown WP Template

  • 13

    Black WP Template

  • 14

    Blue WP Template

  • 15

    Green WP Template

  • 16

    Red WP Template

  • 17

    Orange WP Template

  • 18

    Blue HTML Template

  • 19

    Brown HTML Template

  • 20

    WWW Template

  • 21

    Choc & Coffee

  • 22

    Candy Cakes

  • 23

    Paper Made

  • 24

    Paper Made

  • 25

    Eco Enviro

    A great template with a paper / eco / recycle feel to it.
  • 26

    Red

    Red/Marone website template. Designed for prestige property and realestate.
  • 27

    Grey

    The grey version of this template.
  • 28

    Blue

    Blue HTML website template. Great for businesses. Easy to modify and customise to suit your clients needs
  • 29

    Wordpress

  • 30

    Black & Green

  • 31

    Black & Green (Grass)

  • 32

    Black & Green (Leaf)

  • 33

    Black & Green (Tree)

  • 34

    Black & Grey

  • 35

    Black & Orange

  • 36

    Black & Orange (Textured)

  • 37

    Black & Pink

  • 38

    Black & Purple

  • 39

    Black & Purple & Blue

  • 40

    Black & Red

  • 41

    Black & Yellow

  • 42

    Blue & Grey

  • 43

    Blue & Orange

  • 44

    Blue & Pink

  • 45

    Child Template

    Child Care Creative - Download Website Theme Here.
  • 46

    Green Baby HTML

    Green Baby Website Template - Download ThemeForest Theme.
  • 47

    Brown Baby HTML

    Brown Baby Website Template - Download ThemeForest Theme.
  • 48

    Blue Wedding HTML

    Blue Wedding Website Template - Download ThemeForest Theme.
  • 49

    Green Baby PHP Shop

    Green Baby Website Template - with bonus Simple PHP Shop.
  • 50

    Brown Baby PHP Shop

    Brown Baby Website Template - with bonus Simple PHP Shop.
  • 51

    Blue Wedding PHP Shop

    Blue Wedding Website Template - with bonus Simple PHP Shop.
  • 52

    Sport & Grunge - Blue Version

    Sport Action Adventure Theme, Grunge - Download ThemeForest Theme.
  • 53

    Sport & Grunge - Green Version

    Sport Action Adventure Theme, Grunge - Download ThemeForest Theme.
  • 54

    Sport & Grunge - Orange Version

    Sport Action Adventure Theme, Grunge - Download ThemeForest Theme.
  • 55

    Sport & Grunge - Red Version

    Sport Action Adventure Theme, Grunge - Download ThemeForest Theme.
  • 56

    Child Care Creative Wordpress

    Child Care Creative WordPress Shop & Newsletter - Download ThemeForest Theme.
  • 57

    SingleJump - Red

    SingleJump Red Template - Single Product scrolling/jumping online Shop - Download ThemeForest Theme.
  • 58

    SingleJump - Blue

    SingleJump Blue Template - Single Product scrolling/jumping online Shop - Download ThemeForest Theme.
  • 59

    SingleJump - Brown

    SingleJump Brown Template - Single Product scrolling/jumping online Shop - Download ThemeForest Theme.
  • 60

    SingleJump - Grey

    SingleJump Grey Template - Single Product scrolling/jumping online Shop - Download ThemeForest Theme.
  • 61

    SingleJump - Kids

    SingleJump Kids Template - Single Product scrolling/jumping online Shop - Download ThemeForest Theme.
  • 62

    Blue Baby Cute WordPress

    Blue Baby,Child,kids Website Template - Download ThemeForest Theme.
  • 63

    Sport & Grunge - Blue Version

    Sport Action Adventure WordPress, Grunge - Download WordPress Template.
  • 64

    Sport & Grunge - Green Version

    Sport Action Adventure WordPress, Grunge - Download WordPress Template.
  • 65

    Sport & Grunge - Orange Version

    Sport Action Adventure WordPress, Grunge - Download WordPress Template.
  • 66

    Sport & Grunge - Red Version

    Sport Action Adventure WordPress, Grunge - Download WordPress Template.
  • 67

    Jump Eco - Blue Version

    Download Jump Eco Blue theme
  • 68

    Jump Eco - Green Version

    Download Jump Eco Green theme
  • 69

    Jump Eco - Brown Version

    Download Jump Eco Grown theme from themeforest
  • 70

    Mommy Blog HTML Template

    Download Mommy Blog HTML Theme
  • 71

    Mommy Blog Wordpress Theme

    Download Mommy Blog Wordpress Theme
  • 72

    Travel Beach Island Wordpress Theme

    Download Travel Island ThemeForest Wordpress


View All »

 

 

Want to build Robots and play with Electronics?

Gold Coast Tech Space Inc.

Come down to the Gold Coast techspace in Southport. Computers, robots, electronics, programming, chemistry. Got a cool project idea? Come use our tools. Check out gctechspace.org or RSVP for upcoming events at meetup.com.


Retrieved from "http://2012.igem.org/Team:NTNU_Trondheim/Test"