Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  
        <div id="top" class="group">
            <header id="header">
                <h2>
                    header
                </h2>
            </header>
​
            
​
 <menu>
  <div class="arrow"></div>
​
   <ul>
    
    <li><a href="#map">Map</a></li>
     <li><a href="#home">Home</a></li>
   </ul>
 </menu>
</div>
​
<div id="main">
    <span id="home">
      <p>home page</p>
    </span>
​
    <span id="map">
      <div id="map_canvas"></div>
    </span>
          
    
</div>
​
​
 
 /* CSS FOR THE MAP */
​
html, body{
        height: 100%;
        margin: 0px;
        padding: 0px
      }
​
      #map_canvas {
          margin-top:3px;
          height:300px;
    
        }
​
​
​
/* Important rule for the functioning of the switcher */
#main > span{display:none}
​
​
/* Whole CSS */
​
body { background: #7A8498; }
​
            div#main { font-size: 16px; line-height: 26px; color: #fff; }
            div#main div.fancy-select { margin: 0 auto 60px; width: 200px; }
​
            div#main p { margin-bottom: 24px; }
            div#main a { text-decoration: none; color: #BAC9E7; font-weight: 600; }
​
            
            div#main span { width: 940px; margin: 90px auto; }
            div#main section h2, div#main section h3 { font-size: 22px; margin-bottom: 18px; font-weight: 600; }
​
​
*{margin:0;padding:0;border:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box}
html{overflow-y:scroll}
body,input,select,textarea,button{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:"Open Sans", sans-serif}
a{-webkit-tap-highlight-color:#87BEC3}::-moz-selection{background:#87BEC3;color:#fff;text-shadow:none}
::selection{background:#87BEC3;color:#fff;text-shadow:none}
img{-ms-interpolation-mode:bicubic}
strong{font-weight:bold}
em{font-style:italic}
.group:after{content:".";display:block;height:0;clear:both;visibility:hidden}
* html .group{height:1%}
*:first-child+html .group{min-height:1px}
div#top{background:#22262A}
div#top #header{width:940px;margin:0 auto 52px;padding-top:30px}
​
div#top menu{background:#363B40;padding:19px 0;position:relative}
div#top menu div.arrow{content:"";display:block;width:0;height:0;border:7px solid transparent;border-top-color:#363B40;position:absolute;bottom:-14px;left:50%;margin-left:-7px;transition:left 300ms ease-out;-webkit-transition:left 300ms ease-out;-moz-transition:left 300ms ease-out;-o-transition:left 300ms ease-out;-ms-transition:left 300ms ease-out}
div#top menu ul{list-style:none;text-align:center}
div#top menu ul li{display:inline-block;margin:0 42px}
div#top menu ul li a{color:#5D6268;text-transform:uppercase;font-weight:bold;padding:3px 6px;text-decoration:none;transition:color 300ms ease-out;-webkit-transition:color 300ms ease-out;-moz-transition:color 300ms ease-out;-o-transition:color 300ms ease-out;-ms-transition:color 300ms ease-out}
div#top menu ul li a.current{color:#fff}
​
 
/* JS FOR THE SWITCHER */
​
$(document).ready(function() {
​
  var menu = $('#top').find('menu');
​
                function positionMenuArrow() {
                    var current = menu.find('.current');
​
                    menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
                }
​
                $(window).on('resize', positionMenuArrow);
​
​
                menu.on('click', 'a', function(e) {
                    var el = $(this),
                        href = el.attr('href'),
                        currentSection = $('#main').find('.current');
​
                    e.preventDefault();
​
                    menu.find('.current').removeClass('current');
​
                    el.addClass('current');
​
                    positionMenuArrow();
​
                    if (currentSection.length) {
                        currentSection.fadeOut(300).promise().done(function() {
                            $(href).addClass('current').fadeIn(300);
                        });
                    } else {
                        $(href).addClass('current').fadeIn(300);
                    }
                });
​
                menu.find('a:first').trigger('click')
​
    });
​
​
​
/*  JS FOR THE MAP */
​
​
 var map;
​
​
var center = new google.maps.LatLng(-25.363882,131.044922);
​
      function initialize() {
​
​
        // Map options
        var mapOptions = {
          zoom: 4,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        // Attach the map to the document
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
​
        }
​
​
​
google.maps.event.addDomListener(window, 'load', initialize);
​
​
​
​
​
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers