www.webdeveloper.com
Results 1 to 4 of 4

Thread: Want to add a menu bar to my site

  1. #1
    Join Date
    May 2012
    Posts
    60

    Want to add a menu bar to my site

    Hi.

    So far i have been making my site in php/sql with a 960css grid,

    But since i am relearning as i go, my menu bar leaves much to be desired.

    it uses radio buttons >.<

    my site is: http://plecpicker.com

    It only needs to be a simple menu, since i will be launching with very limited stock, but i need to structure it for easy dev. That is how i'm designing the whole site,

    My java skills are very old and mostly forgotten, gonna start reading up again, but any links directed towards this area would be great.

    P.S. Smartphone compatibility is important.

    Thanks for reading guys.
    Last edited by PlecPicker; 05-23-2012 at 06:43 AM.

  2. #2
    Join Date
    May 2012
    Location
    United State
    Posts
    79
    nice work dude.
    Can you please help to make my website in html,
    my website www.dmaarc.com is also made in php, but i want to make it in html and jquery but not in php because of SEO point of view.
    If you can help me in this matter so see you soon.

  3. #3
    Join Date
    May 2012
    Posts
    60
    Thanks dude!
    I can talk to you on facebook if you like
    Saves logging in and logging out of this site

    Like, follow or google +1 plecpicker. Just click all the buttons at the top of my site and message/write on the wall. Do whats easiest for you.

  4. #4
    Join Date
    May 2012
    Posts
    60
    Hey, that last reply was my mate/business partner...

    I am not gonna claim to 100&#37; understand this code...
    I have tweaked it enough from what i copied to do what i need.
    Yet since i needed 2 menus, i had to double the code...
    I doubt this is the best coding practice way, but it works.

    Here's my code, hope you find it useful

    CssHorizontalMenu.JS
    PHP Code:
    var cssmenuids=["cssmenu1"]
    var 
    cssmenuid=["cssmenu2"]
    var 
    csssubmenuoffset=-1

    function createcssmenu2(){
        for (var 
    i=0;i<cssmenuids.length;i++){    var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")        
            for(var 
    t=0;t<ultags.length;t++){        
                
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
                
    var spanref=document.createElement("span")
                
    spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
                
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
                
    ultags[t].parentNode.onmouseover=function(){
                    
    this.style.zIndex=100
                    this
    .getElementsByTagName("ul")[0].style.visibility="visible"
                    
    this.getElementsByTagName("ul")[0].style.zIndex=0}
                
    ultags[t].parentNode.onmouseout=function(){
                    
    this.style.zIndex=0
                    this
    .getElementsByTagName("ul")[0].style.visibility="hidden"
                    
    this.getElementsByTagName("ul")[0].style.zIndex=100}}}    
            for (var 
    i=0;i<cssmenuid.length;i++){ var ultags=document.getElementById(cssmenuid[i]).getElementsByTagName("ul")        
            for(var 
    t=0;t<ultags.length;t++){        
                
    ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
                
    var spanref=document.createElement("span")
                
    spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
                
    ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
                
    ultags[t].parentNode.onmouseover=function(){
                    
    this.style.zIndex=100
                    this
    .getElementsByTagName("ul")[0].style.visibility="visible"
                    
    this.getElementsByTagName("ul")[0].style.zIndex=0}
                
    ultags[t].parentNode.onmouseout=function(){
                    
    this.style.zIndex=0
                    this
    .getElementsByTagName("ul")[0].style.visibility="hidden"
                    
    this.getElementsByTagName("ul")[0].style.zIndex=100}}}}
    if(
    window.addEventListenerwindow.addEventListener("load",createcssmenu2,false)
    else if(
    window.attachEventwindow.attachEvent("onload",createcssmenu2
    In My CSS file:
    PHP Code:
    .horizontalcssmenu ul{margin:0;padding:0;list-style-type:none;}
    .
    horizontalcssmenu ul li{position:relative;display:inline;float:left;}
    .
    horizontalcssmenu ul li a{display:block;width:145px;/**/padding:1px 1px;border:1px solid #000000;border-left-width:0;text-decoration:none;background:url(images/menubg.gif) center center repeat-x;color:#D4A017;font:bold 25px Tahoma;}
    .horizontalcssmenu ul li ul{left:0;top:0;border-top:1px solid #000000;position:absolute;display:block;visibility:hidden;z-index:100;}
    .horizontalcssmenu ul li ul li{display:inline;float:none;}
    .
    horizontalcssmenu ul li ul li a{width:180px;/**/font-weight:normal;padding:2px 5px;background:#050505;border-width:0 1px 1px 1px;}
    .horizontalcssmenu ul li a:hover{background:url(images/menubgover.gifcenter center repeat-x;}
    .
    horizontalcssmenu ul li ul li a:hover{background:#D4A017;  color:#000000;}
    html p#iepara{padding-top:1em;}
    html .horizontalcssmenu ul li{float:left;height:1%;}
    html .horizontalcssmenu ul li a{height:1%;}

    .
    horizontalcssmenu2 ul{margin:0;padding:0;list-style-type:none;}
    .
    horizontalcssmenu2 ul li{position:relative;display:inline;float:left;}
    .
    horizontalcssmenu2 ul li a{display:block;width:140px;height:25px;/**/padding:1px 1px;border:1px solid #000000;border-left-width:0;text-decoration:none;background:url(images/menubg.gif) center center repeat-x;color:#D4A017;font:bold 17px Tahoma;}
    .horizontalcssmenu2 ul li ul{left:0;top:0;border-top:1px solid #000000;position:absolute;display:block;visibility:hidden;z-index:100;}
    .horizontalcssmenu2 ul li ul li{display:inline;float:none;}
    .
    horizontalcssmenu2 ul li ul li a{width:165px;/**/font-weight:normal;padding:2px 5px;background:#050505;border-width:0 1px 1px 1px;}
    .horizontalcssmenu2 ul li a:hover{background:url(images/menubgover.gifcenter center repeat-x;}
    .
    horizontalcssmenu2 ul li ul li a:hover{background:#D4A017;  color:#000000;}
    html .horizontalcssmenu2 ul li{float:none;height:1%;}
    html .horizontalcssmenu2 ul li a{height:1%;} 
    The actual html code:
    PHP Code:
    <div class='horizontalcssmenu  '>
        <
    ul id='cssmenu1'>
            <
    li style='border-left: 1px solid #202020;'><a href='http://plecpicker.com/?search&t=strings&o=DESC'>Strings</a><ul>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=acoustic&o=DESC'>Acoustic Guitar</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=classical&o=DESC'>Classical Guitar</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=electric&o=DESC'>Electric Guitar</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=bass&o=DESC'>Bass Guitar</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=banjo&o=DESC'>Banjo</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=strings&st=ukulele&o=DESC'>Ukulele</a></li></ul></li>
            <
    li><a href='http://plecpicker.com/?search&t=plecs&o=DESC'>Plectrums</a><ul>
                <
    li><a href='http://plecpicker.com/?search&t=plecs&st=plastic&o=DESC'>Celluloid</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=plecs&st=thumb&o=DESC'>Thumb Picks</a></li>
                <
    li><a href='http://plecpicker.com/?search&t=plecs&st=metal&o=DESC'>Metal</a></li></ul></li>
            <
    li><a href='http://plecpicker.com/?search&t=other&o=DESC'>Accessories</a><ul>
                <
    li><a href='http://'>Straps</a></li>
                <
    li><a href='http://'>Leads</a></li>
                <
    li><a href='http://'>Tuners</a></li>
                <
    li><a href='http://'>Pedals</a></li>
        </
    ul></li></ul></div
    This is how i ended up doing it, Hope it helps

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles