menu

by witold

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>





<div class="more">
                <ul>
                    <!--<li class="selected"><a href="https://docs.google.com/spreadsheet/embeddedform?formkey=dGdMZjg1T2duck55UjVHNGx2MHRlN0E6MQ" rel="#overlay"><B>ADD Point of Interest</B></a></li>  -->
                    <li><a href="https://docs.google.com/spreadsheet/embeddedform?formkey=dGdMZjg1T2duck55UjVHNGx2MHRlN0E6MQ&entry_0=Test1&entry_1=Test2&entry_2=test3%22" rel="#overlay"><B>ADD Point of Interest</B></a></li>
                    <li><a href="https://docs.google.com/spreadsheet/embeddedform?formkey=dGdMZjg1T2duck55UjVHNGx2MHRlN0E6MQ" rel="#overlay"><B>ADD Route</B></a></li>
                    <li><a href="https://About" rel="#overlay" ><B>About</B></a></li>
                </ul>
            </div>


 
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
    fdsafsda fdsafdsa
  <!-- the external content is loaded inside this tag -->
  <div class="contentWrap"></div>
</div>

CSS

a{
    color: #fff;
    text-decoration: none;
}



.more{
    position:relative;
    clear:both;
    font-family:'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    padding: 5px 0px 10px;
    width: 372px;
    margin: 0 auto;
}
.more ul{
    display:block;
    text-align:center;
    height: 30px;
}
.more ul li{
    display: block;
    padding: 4px 2px;
    float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
    background:#aaa;
    color:#fff;
    text-shadow:none;
}
.more ul li a{
    color:#555;
    float:left;
    background:#fff;
    width:auto;
    padding: 2px 5px;
    -moz-box-shadow:1px 1px 2px #aaa;
    -webkit-box-shadow:1px 1px 2px #aaa;
    box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
    background:#000;
    color:#fff;
}




 /* use a semi-transparent image for the overlay */
  #overlay {
    background-image:url(http://jquerytools.org/media/img/overlay/transparent.png);
    color:#4F4F4F;
    height:855px;
  }
  /* container for external content. uses vertical scrollbar, if needed */
  div.contentWrap {
    height:765px;
    overflow-y:auto;
  }


/* the overlayed element */
.apple_overlay {

    /* initially overlay is hidden */
    display:none;

    /* growing background image */
    background-image:url(http://jquerytools.org/media/img/overlay/transparent.png); 

    /*
      width after the growing animation finishes
      height is automatically calculated
      */
    width:640px;

    /* some padding to layout nested elements nicely  */
    padding:35px;

    /* a little styling */
    font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
    background-image:url(http://jquerytools.org/media/img/overlay/close.png);
    position:absolute; right:5px; top:5px;
    cursor:pointer;
    height:35px;
    width:35px;
}

JavaScript

$(function() {
 
    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({
 
        mask: 'darkred',
        effect: 'apple',
 
        onBeforeLoad: function() {
 
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");
 
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }
 
    });
});