could not do a simple superfish example

goodk
goodk used Ask the Experts™
on
I saw this,
http://users.tpg.com.au/j_birch/plugins/superfish/#examples

I tried this, but did not work, also notice the left menu stays stuck on open
http://www.bestdr.info/Examples/superfish-1.4.8/Copy%20of%20example.html

can you see what am I doing wrong?

I would like the menu to look like this, eventually
http://www.hccnevada.com/index.php
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LZ1
Top Expert 2011

Commented:
Try removing the pathclass:current from the jquery.  Or remove the class current from the HTML
leakim971Multitechnician
Top Expert 2014

Commented:
Check this page : http://jsfiddle.net/978vq/

Javascript :
var subArr=new Array('brownsubmenu','bluesubmenu',"greensubmenu");
var btnArr=new Array("homebtn",'patbtn','abbtn');

$('#menu a').hover(function() {
    $(this).next().show();
}, function() {
    $(this).next().hide();
});

$(".topbtn").each(function() {

    $(this).mouseover(function() {
        var id=$(this).attr("id");
        for(var i=0;i<3;i++) {
            $("#"+btnArr[i]).removeClass(btnArr[i]+'ovr');
            $("#"+btnArr[i]).addClass(btnArr[i]);
            if(document.getElementById(subArr[i]).style.display=='' && id!=btnArr[i])
                $("#"+subArr[i]).fadeOut();
            }
            for(var i=0;i<3;i++) {
                if(btnArr[i]==id) {
                    $("#"+btnArr[i]).removeClass(id);
                    $(this).addClass(id+'ovr');
                    $("#"+subArr[i]).fadeIn();
                }
                else {
                    $("#"+subArr[i]).fadeOut();
                }
            }
    })
    
     $(this).mouseout(function() { });
});

Open in new window


HTML :
<script type="text/javascript" src="http://www.hccnevada.com/scripts/hoverIntent.js"></script> 
<script type="text/javascript" src="http://www.hccnevada.com/scripts/superfish.js"></script> 
<div class="wrapper">
    <div class="topbtn homebtn" id="homebtn" style="cursor:pointer" onclick="redirect('index.php')">
        <img src="http://www.hccnevada.com/images/home-icon.png" alt="Home" width="20" height="18" hspace="5" align="left">Home
    </div>
    <div class="topbtn patbtn" id="patbtn">
        <img src="http://www.hccnevada.com/images/patient-icon.png" alt="Patient Information" width="26" height="20" hspace="5" align="left">Patient Information 
    </div>
    <div class="topbtn abbtn" id="abbtn">
        <img src="http://www.hccnevada.com/images/about-icon.png" alt="About" width="18" height="20" hspace="5" align="left">about Hccn
    </div>
</div>

<div class="submenu" id="defaultsubmenu" style="display: none">&nbsp;</div>

<div class="submenu" id="brownsubmenu" style="display: none">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Book_your_appointment.html" class="sf-with-ul ">Book your appointment</a>
            </li>
            <li class="current">
                <a href="Refer_a_patient.html" class="sf-with-ul ">Refer a patient</a>
            </li>
            <li class="current">
                <a href="Contact_Us.html" class="sf-with-ul ">Contact Us</a>
            </li>
            <li class="current">
                <a href="Feedback.html" class="sf-with-ul ">Feedback</a>
            </li>
        </ul>
    </div>
</div>

<div class="submenu" id="bluesubmenu" style="display: none;">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Your_first_visit.html" class="sf-with-ul ">Your first visit</a>
            </li>
            <li class="current">
                <a href="Patient_Forms.html" class="sf-with-ul ">Patient Forms</a>
            </li>
            <li class="current">
                <a href="Understanding_Cancer.html" class="sf-with-ul ">Understanding Cancer</a>
            </li>
            <li class="current">
                <a href="Survivor_Stories.html" class="sf-with-ul ">Survivor Stories</a>
            </li>
        </ul>
    </div>
</div>

<div class="submenu" id="greensubmenu" style="display: none;">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Meet_Dr._Mehdi.html" class="sf-with-ul ">Meet Dr. Mehdi</a>
            </li>
            <li class="current">
                <a href="Our_Facility.html" class="sf-with-ul ">Our Facility</a>
            </li>
            <li class="current">
                <a href="Our_Staff.html" class="sf-with-ul ">Our Staff</a>
            </li>
            <li class="current">
                <a href="Our_Mission.html" class="sf-with-ul ">Our Mission</a>
            </li>
            <li class="current">
                <a href="Affiliations.html" class="sf-with-ul ">Affiliations</a>
            </li>
            <li class="current">
                <a href="News_and_Events.html" class="sf-with-ul ">News and Events</a>
            </li>
        </ul>
    </div>
</div>

Open in new window


CSS (you need to clean it) :

@charset "UTF-8";
/* CSS Document */
body {
    background-color: #efefef;
    margin: 0px;
    padding: 0px;
    background-image: url(http://www.hccnevada.com/images/background.gif);
}

.maincontainer{
    
    background-image:url(http://www.hccnevada.com/images/body-background.jpg);
    min-height:500px;
    background-repeat:repeat-x;
    }

.wrapper{

margin:auto;
text-align:center;
width:780px;


}

.topbtn{

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#d2d2d2;
float:left;
padding-left:24px;
padding-right:24px;
padding-top:10px;
text-transform:uppercase;
line-height:22px;
background-repeat:repeat-x;}

#homebtn{

border-right:1px solid #c0cabb;
border-left:1px solid #c0cabb;

padding-bottom:9px;


}

.homebtn{
border-bottom:1px solid #c5c3c3;
background-image:url(http://www.hccnevada.com/images/button-brown-back.jpg);}

.homebtnovr{
background-image:url(http://www.hccnevada.com/images/button-brown-back-over.jpg);
border-bottom:1px solid #855f0a;



}



#patbtn{


text-align:left;
border-right:1px solid #c0cabb;
padding-bottom:9px;

}


.patbtn{
background-image:url(http://www.hccnevada.com/images/button-blue-back.jpg);
border-bottom:1px solid #c5c3c3;
}

.patbtnovr{
background-image:url(http://www.hccnevada.com/images/button-blue-back-over.jpg);
border-bottom:1px solid #0f70a7;
}

#abbtn{

padding-bottom:9px;
border-right:1px solid #c0cabb;

}


.abbtn{
border-bottom:1px solid #c5c3c3;
background-image:url(http://www.hccnevada.com/images/button-green-back.jpg);
}

.abbtnovr{
border-bottom:1px solid #3f8316;
background-image:url(http://www.hccnevada.com/images/button-green-back-over.jpg);
}


.submenu{
clear:both;

border-bottom:1px solid #c5c3c3;
background-color:#767676;
padding-top:8px;
padding-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
text-transform:uppercase;
}


.submenu ul{

margin:0px;
clear:both;

padding-left:0px;

}

.submenu li{
    float:left;
    
    list-style-image: url(http://www.hccnevada.com/images/bullet.png);
    padding-right:20px;
    margin-left:20px;
    
}


.submenu:after{
 content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.submenu li a{
color:#C8C8C8;
text-decoration:none}
.submenu li a:hover{
color:#fff;
text-decoration:none}

#bluesubmenu{

background-color:#0f70a7;
position:absolute;
top:42px;
left:0px;
width:100%;}

#defaultsubmenu{

width:100%;}


#greensubmenu{
background-color:#3f8316;
position:absolute;
top:42px;
left:0px;
width:100%;}

#brownsubmenu{
background-color:#855f0a;
position:absolute;
top:42px;
left:0px;
width:100%;}

.clear{
    clear:both;

}



div{

font-family:Arial, Helvetica, sans-serif;
}

Open in new window

Author

Commented:
lz1: I tried but it does not help.  

how to make his example work?
http://users.tpg.com.au/j_birch/plugins/superfish/#examples

leakim971:  I tried your solution - you made it so much easier but sadly I could not follow it
http://www.bestdr.info/Examples/superfish-1.4.8/HTMLPage1.htm

I made three files like you had, and tried it but it did not work.  May be I am missing some minor step?
please help thanks





HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

leakim971Multitechnician
Top Expert 2014

Commented:
replace :
<script type="text/javascript" src="http://www.hccnevada.com/scripts/hoverIntent.js"></script> 
<script type="text/javascript" src="http://www.hccnevada.com/scripts/superfish_1.js"></script> 
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>

Open in new window

by:
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.hccnevada.com/scripts/hoverIntent.js"></script> 
<script type="text/javascript" src="http://www.hccnevada.com/scripts/superfish_1.js"></script> 

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
fix the path of your jsuperfish_1.js file :
Currenty set with :
http://www.hccnevada.com/scripts/superfish_1.js
We get a 404 error

Author

Commented:
ok, I tried again, after your suggested changes, no luck
http://www.bestdr.info/Examples/superfish-1.4.8/HTMLPage1.htm
leakim971Multitechnician
Top Expert 2014

Commented:
you did not include the superfish plugin itslef

Author

Commented:
I added

<script src="js/superfish.js" type="text/javascript"></script>

is this you were saying? but still not working.
leakim971Multitechnician
Top Expert 2014

Commented:
put the $('#menu a').hover and $(".topbtn").each function inside

$(document).ready(function() {

// put them here

})

put superfish.js before superfish_1.js

Author

Commented:

like this?
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js/hoverIntent.js" type="text/javascript"></script>
    <script src="js/superfish.js" type="text/javascript"></script>
<script src="js/superfish_1.js" type="text/javascript"></script>
<link href="css/superfish_1.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">

    $(document).ready(function () {
       // $("ul.sf-menu").superfish({
       //     pathClass: 'current'

            $('#menu a').hover
             $(".topbtn").each

        });
    });
 
</script>
leakim971Multitechnician
Top Expert 2014

Commented:
no, no remove that, the code in superfish_1 need to wait the dom, put both code in document.ready
Multitechnician
Top Expert 2014
Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
@charset "UTF-8";
/* CSS Document */
body {
    background-color: #efefef;
    margin: 0px;
    padding: 0px;
    background-image: url(http://www.hccnevada.com/images/background.gif);
}

.maincontainer{
    
    background-image:url(http://www.hccnevada.com/images/body-background.jpg);
    min-height:500px;
    background-repeat:repeat-x;
    }

.wrapper{

margin:auto;
text-align:center;
width:780px;


}

.topbtn{

font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#d2d2d2;
float:left;
padding-left:24px;
padding-right:24px;
padding-top:10px;
text-transform:uppercase;
line-height:22px;
background-repeat:repeat-x;}

#homebtn{

border-right:1px solid #c0cabb;
border-left:1px solid #c0cabb;

padding-bottom:9px;


}

.homebtn{
border-bottom:1px solid #c5c3c3;
background-image:url(http://www.hccnevada.com/images/button-brown-back.jpg);}

.homebtnovr{
background-image:url(http://www.hccnevada.com/images/button-brown-back-over.jpg);
border-bottom:1px solid #855f0a;



}



#patbtn{


text-align:left;
border-right:1px solid #c0cabb;
padding-bottom:9px;

}


.patbtn{
background-image:url(http://www.hccnevada.com/images/button-blue-back.jpg);
border-bottom:1px solid #c5c3c3;
}

.patbtnovr{
background-image:url(http://www.hccnevada.com/images/button-blue-back-over.jpg);
border-bottom:1px solid #0f70a7;
}

#abbtn{

padding-bottom:9px;
border-right:1px solid #c0cabb;

}


.abbtn{
border-bottom:1px solid #c5c3c3;
background-image:url(http://www.hccnevada.com/images/button-green-back.jpg);
}

.abbtnovr{
border-bottom:1px solid #3f8316;
background-image:url(http://www.hccnevada.com/images/button-green-back-over.jpg);
}


.submenu{
clear:both;

border-bottom:1px solid #c5c3c3;
background-color:#767676;
padding-top:8px;
padding-bottom:8px;
font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
text-transform:uppercase;
}


.submenu ul{

margin:0px;
clear:both;

padding-left:0px;

}

.submenu li{
    float:left;
    
    list-style-image: url(http://www.hccnevada.com/images/bullet.png);
    padding-right:20px;
    margin-left:20px;
    
}


.submenu:after{
 content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.submenu li a{
color:#C8C8C8;
text-decoration:none}
.submenu li a:hover{
color:#fff;
text-decoration:none}

#bluesubmenu{

background-color:#0f70a7;
position:absolute;
top:42px;
left:0px;
width:100%;}

#defaultsubmenu{

width:100%;}


#greensubmenu{
background-color:#3f8316;
position:absolute;
top:42px;
left:0px;
width:100%;}

#brownsubmenu{
background-color:#855f0a;
position:absolute;
top:42px;
left:0px;
width:100%;}

.clear{
    clear:both;

}



div{

font-family:Arial, Helvetica, sans-serif;
}


</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.hccnevada.com/scripts/hoverIntent.js"></script> 
<script type="text/javascript" src="http://www.hccnevada.com/scripts/superfish.js"></script> 
<script type="text/javascript">
var subArr=new Array('brownsubmenu','bluesubmenu',"greensubmenu");
var btnArr=new Array("homebtn",'patbtn','abbtn');
$(document).ready(function() {
$('#menu a').hover(function() {
    $(this).next().show();
}, function() {
    $(this).next().hide();
});

$(".topbtn").each(function() {

    $(this).mouseover(function() {
        var id=$(this).attr("id");
        for(var i=0;i<3;i++) {
            $("#"+btnArr[i]).removeClass(btnArr[i]+'ovr');
            $("#"+btnArr[i]).addClass(btnArr[i]);
            if(document.getElementById(subArr[i]).style.display=='' && id!=btnArr[i])
                $("#"+subArr[i]).fadeOut();
            }
            for(var i=0;i<3;i++) {
                if(btnArr[i]==id) {
                    $("#"+btnArr[i]).removeClass(id);
                    $(this).addClass(id+'ovr');
                    $("#"+subArr[i]).fadeIn();
                }
                else {
                    $("#"+subArr[i]).fadeOut();
                }
            }
    })
    
     $(this).mouseout(function() { });
});
})
</script>
</head>

<body>
<div class="wrapper">
    <div class="topbtn homebtn" id="homebtn" style="cursor:pointer" onclick="redirect('index.php')">
        <img src="http://www.hccnevada.com/images/home-icon.png" alt="Home" width="20" height="18" hspace="5" align="left">Home
    </div>
    <div class="topbtn patbtn" id="patbtn">
        <img src="http://www.hccnevada.com/images/patient-icon.png" alt="Patient Information" width="26" height="20" hspace="5" align="left">Patient Information 
    </div>
    <div class="topbtn abbtn" id="abbtn">
        <img src="http://www.hccnevada.com/images/about-icon.png" alt="About" width="18" height="20" hspace="5" align="left">about Hccn
    </div>
</div>

<div class="submenu" id="defaultsubmenu" style="display: none">&nbsp;</div>

<div class="submenu" id="brownsubmenu" style="display: none">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Book_your_appointment.html" class="sf-with-ul ">Book your appointment</a>
            </li>
            <li class="current">
                <a href="Refer_a_patient.html" class="sf-with-ul ">Refer a patient</a>
            </li>
            <li class="current">
                <a href="Contact_Us.html" class="sf-with-ul ">Contact Us</a>
            </li>
            <li class="current">
                <a href="Feedback.html" class="sf-with-ul ">Feedback</a>
            </li>
        </ul>
    </div>
</div>

<div class="submenu" id="bluesubmenu" style="display: none;">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Your_first_visit.html" class="sf-with-ul ">Your first visit</a>
            </li>
            <li class="current">
                <a href="Patient_Forms.html" class="sf-with-ul ">Patient Forms</a>
            </li>
            <li class="current">
                <a href="Understanding_Cancer.html" class="sf-with-ul ">Understanding Cancer</a>
            </li>
            <li class="current">
                <a href="Survivor_Stories.html" class="sf-with-ul ">Survivor Stories</a>
            </li>
        </ul>
    </div>
</div>

<div class="submenu" id="greensubmenu" style="display: none;">
    <div class="wrapper">
        <ul class="sf-menu " style="padding-top:0px">
            <li class="current">
                <a href="Meet_Dr._Mehdi.html" class="sf-with-ul ">Meet Dr. Mehdi</a>
            </li>
            <li class="current">
                <a href="Our_Facility.html" class="sf-with-ul ">Our Facility</a>
            </li>
            <li class="current">
                <a href="Our_Staff.html" class="sf-with-ul ">Our Staff</a>
            </li>
            <li class="current">
                <a href="Our_Mission.html" class="sf-with-ul ">Our Mission</a>
            </li>
            <li class="current">
                <a href="Affiliations.html" class="sf-with-ul ">Affiliations</a>
            </li>
            <li class="current">
                <a href="News_and_Events.html" class="sf-with-ul ">News and Events</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Open in new window

Author

Commented:
this works great; Thanks
So this one works for 3 levels?


What I am not understanding is, why the following example do not work?
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
leakim971Multitechnician
Top Expert 2014

Commented:
good luck... can do more, hope you understand

Author

Commented:
super

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial