Results 1 to 9 of 9

Thread: Side Navigation Bar

  1. #1
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Side Navigation Bar

    Well, I saw a cool looking Side Navigation Bar in a ZetaBoard and would like to have one too. I asked their Support teams, but all said they don't know =[.

    So I tried to view source and saw dynamicdrive.com Copyright information. So I guess you guys might have this code.

    Can someone find it for me? Im new to this website >.<.

    Here's the website that i saw the navigation bar from.

    http://claninstinct.net/index/

    ~bomb

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

  3. #3
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Do you know where I would put these codes?

    ~Bomb

  4. #4
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    It tells you on that link where to put the code, just to clarify...

    Put this in the <head> tag:

    Code:
    <head>
    
    <style type="text/css">
    
    #dropmenudiv{
    position:absolute;
    background-color: #E3FFB0;
    border:1px solid black;
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    }
    
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    }
    
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: #C7FF5E;
    }
    
    /* Sample CSS definition for the example list. Remove if desired */
    .navlist li {
    list-style-type: square;
    width: 135px;
    background-color: #FFFFB9;
    }
    
    </style>
    
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Vertical Menu-  Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a>'
    menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
    menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
    menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'
    menu1[4]='<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>'
    
    
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a>'
    menu2[1]='<a href="http://www.javascriptkit.com/javaindex.shtml">JavaScript tutorials</a>'
    menu2[2]='<a href="http://news.bbc.co.uk">JavaScript Reference</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/java/">Java Applets</a>'
    menu2[3]='<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a>'
    menu2[4]='<a href="http://www.javascriptkit.com/howto/">Design Tutorials</a>'
    		
    var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
    var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
    }
    else{
    var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
    if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
    edgeoffset=dropmenuobj.y
    }
    }
    return edgeoffset
    }
    
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    
    
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "top")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }
    
    return clickreturnvalue()
    }
    
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    
    </script>
    
    </head>
    Then you'd put this in the <body> tag:

    Code:
    <body>
    
    <a href="default.htm" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Webmaster Links</a><br />
    
    <!-- Activate menu onclick instead 
    <a href="default.htm" onClick="return dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Webmaster Links</a><br />
    -->
    
    <ul class="navlist">
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
    <li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="http://www.javascriptkit.com">JavaScript Kit</a> <span style="position: relative; left: 30px">></span></li>
    <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">Coding Forums</a></li>
    </ul>
    
    </body>
    Simple as that really... of course it doesn't look like what they have on the site you've mentioned, but it can be easily achieved with a few modifications to the CSS, changing colours, heights, widths etc...

  5. #5
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the Zetaboard have these:

    ---
    Javascripts:
    Any scripts that must be placed before the start of the board.
    ---
    Top of the page:
    Content that goes at the very top of the page.
    ---
    Above the Board:
    Content that goes before the main content of the board.
    ---
    Below the Board:
    Content that goes after the main content of the board.
    ---
    Above the copyright:
    Content just before the copyright and end of the page
    ---
    Menu:
    Additional menus that are placed right after the submenu
    ---
    Header/Logo:
    Contains the header, logo, and menus for the board.

    Which place do I place the code in. I'm like clueless =[

    ~Bomb

  6. #6
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    I thought you just wanted the menu :S, sounds like you want to pretty much copy the whole site...

  7. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by Schmoopy View Post
    I thought you just wanted the menu :S, sounds like you want to pretty much copy the whole site...
    I think he does just want the menu but he doesn't seem to know much about coding.

    @bombing_7000:
    Could you be more specific? Do you want to know exactly where to put all the code, or do you actually want an identical page like schmoopy says? Maybe you could post your site and we can show you where to put the menu.

  8. #8
    Join Date
    Nov 2008
    Location
    The Netherlands
    Posts
    21
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    I guess you only want the menu, but it must have the "looks" of the website you showed us?

    In that case you should use the link Schmoopy gave you and customise the lay-out yourself. (that's what the webdesigner from ClanInstinct did).
    This is quite easy, but you'll need some 'basic coding skills', or have someone else do it for you.

  9. #9
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oh thanks for all that helped. A friend of mine showed me how to do that; however, it didn't match my forum :P. So at the end, I didn't really use it :P

    ~Bomb

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
  •