Results 1 to 4 of 4

Thread: Sliding Menu Source Code

  1. #1
    Join Date
    Jan 2009
    Posts
    74

    Sliding Menu Source Code

    Hi, Can anyone able to provide me the Coding of Sliding Menu? I am making a page and not have enough space for all menus, so want to use sliding menu. Can anyone help me in this case?

  2. #2
    Join Date
    Oct 2005
    Posts
    2,393

    Re: Sliding Menu Source Code

    Hi, I know Html and I am sending you the code which will help you to create the sliding menu.
    Code:
    <div id="sliderWrap">
        <div id="openCloseIdentifier"></div>
        <div id="slider">
        <div id="sliderContent">
        This is working...
        </div>
        <div id="openCloseWrap">
        <a href="#" class="Menu" id="topMenuImage">
        <img src="img.png" alt="open" />
        </a>
        </div>
        </div>
    </div>

  3. #3
    Join Date
    Feb 2008
    Posts
    1,852

    Re: Sliding Menu Source Code

    Hi, I don't know any coding for sliding menu, but I have the code in css for sliding menu. If you want you can make use of it.

    Code:
    <style type="text/css">
    body 
    {
    margin: 0;
    font-size:16px;
    color: #000000;
    font-family:Times New Roman;
    }
    #sliderWrap 
    {
    margin: 0 auto;
    width: 300px;
    }
    #slider 
    {
    position: absolute;
    background-image:url(one.png);
    background-repeat:no-repeat;
    background-position: bottom;
    width: 200px;
    height: 100px;
    margin-top: -130px;
    }
    #slider img 
    {
    border: 0;
    }
    #sliderContent 
    {
    margin: 70px 0 0 70px;
    position: absolute;
    text-align:center;
    background-color:#FFFFCC;
    color:#333333;
    font-weight:bold;
    padding: 8px;
    }
    #header 
    {
    margin: 0 auto;
    width: 600px;
    background-color: #F0F0F0;
    height: 150px;
    padding: 8px;
    }
    #openCloseWrap 
    {
    position:absolute;
    margin: 143px 0 0 120px;
    font-size:12px;
    font-weight:bold;
    }
    </style>

  4. #4
    Join Date
    Jan 2008
    Posts
    1,521

    Re: Sliding Menu Source Code

    HI, I have got the sliding menu code on internet when I am making my project. You can take below source code to use it.

    Save the code below with slidemenu.js

    Code:
    var spd = 5;
    
    var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById;
    if (stdDOM) aDOM = 1; 
    else 
    {
    ieDOM = document.all; if (ieDOM) aDOM = 1; 
    else
    {
    var nsDOM = ((navigator.appName.indexOf('Netscape') != -1)&& (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;
    }
    }
    function xDOM(objectId, wS) 
    {
    if (stdDOM) return wS ? document.getElementById(objectId).style:document.getElementById(objectId);
    if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId];
    if (nsDOM) return document.layers[objectId];
    }
    function objWidth(objectID) 
    {
    var obj = xDOM(objectID,0); if(obj.offsetWidth) return obj.offsetWidth; if (obj.clip) return obj.clip.width; return 0;
    }
    function objHeight(objectID) 
    {
    var obj = xDOM(objectID,0); if(obj.offsetHeight) return obj.offsetHeight; if (obj.clip) return obj.clip.height; return 0;
    }
    function setObjVis(objectID,vis) 
    {
    var objs = xDOM(objectID,1); objs.visibility = vis;
    }
    function moveObjTo(objectID,x,y) 
    {
    var objs = xDOM(objectID,1); objs.left = x; objs.top = y;
    }
    function pageWidth() 
    {
    return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
    }
    function pageHeight() 
    {
    return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;
    }
    function posLeft() 
    {
    return typeof window.pageXOffset != 'undefined' ? window.pageXOffset: document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft? document.body.scrollLeft:0;
    }
    function posTop() 
    {
    return typeof window.pageYOffset != 'undefined' ? window.pageYOffset: document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop? document.body.scrollTop:0;
    }
    var xxx = 0; var yyy = 0; var dist = distX = distY = 0; var stepx = 2; var stepy = 0; var mn = 'smenu';
    function distance(s,e) 
    {
    return Math.abs(s-e)
    }
    function direction(s,e) 
    {
    return s>e?-1:1
    }
    function rate(a,b) 
    {
    return a<b?a/b:1
    }
    function start() 
    {
    xxx = -225; yyy = 150; var eX = 0; var eY = 100; dist = distX = distance(xxx,eX); distY = distance(yyy,eY); stepx *= -direction(xxx,eX) * rate(distX,distY); stepy *= direction(yyy,eY) * rate(distY,distX); moveit();
    setObjVis(mn,'visible');
    }
    function moveit() 
    {
    var x = (posLeft()+xxx) + 'px'; var y = (posTop()+yyy) + 'px'; moveObjTo(mn,x,y);
    }
    function mover() 
    {
    if (dist > 0) 
    {
    xxx += stepx; yyy += stepy; dist -= Math.abs(stepx);
    }
     moveit(); setTimeout('mover()',speed);
    }
    function slide() 
    {
    dist = distX; stepx = -stepx; moveit(); setTimeout('mover()',spd*2);return false;
    }
    onload = start;
    window.onscroll = moveit;
    Then save following code with slide1.css

    Code:
    #smenu 
    {
    background-color:#ffffff; text-align:center; border:1px solid #000099; z-Index:999; visibility:hidden; position:absolute; top:100px; left:-225px; width:250px;
    }
    #sleft 
    {
    width:220px; float:left;
    }
    #sright 
    {
    width:20px; float:right;
    }
    #sright a:link
    {
    text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
    }
    #sright a:visited
    {
    text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
    }
    #sright a:active
    {
    text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
    }
    #sright a:hover
    {text-decoration:none; color:#999999; font-weight:bold; font-family:arial, helvetica, sans-serif;
    }
    Now just link these two files into the head of your page using the following code:
    Code:
    <script type="text/javascript" src="slidemenu.js">
    </script>
    <link rel="stylesheet" href="slide1.css" type="text/css" />
    And Done.

Similar Threads

  1. What Is a Computer Source Code?
    By McKenzie! in forum Off Topic Chat
    Replies: 10
    Last Post: 02-09-2011, 11:56 PM
  2. source code for Crysis 2
    By Tallulah in forum Video Games
    Replies: 4
    Last Post: 31-03-2011, 10:30 PM
  3. How to get Source Code of Webpage?
    By Kushan in forum Software Development
    Replies: 3
    Last Post: 26-11-2009, 12:40 PM
  4. CS: Source Menu Background
    By jojobah in forum Video Games
    Replies: 2
    Last Post: 15-10-2008, 02:52 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,711,700,996.20109 seconds with 17 queries