asked on

could not do a simple superfish example

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

LZ1

Try removing the pathclass:current from the jquery. Or remove the class current from the HTML

leakim971

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

goodk

ASKER

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

leakim971

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

leakim971

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

goodk

ASKER

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

leakim971

you did not include the superfish plugin itslef

goodk

ASKER

I added

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

is this you were saying? but still not working.

leakim971

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

$(document).ready(function() {

// put them here

})

put superfish.js before superfish_1.js

goodk

ASKER

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>

leakim971

no, no remove that, the code in superfish_1 need to wait the dom, put both code in document.ready

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

goodk

ASKER

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

leakim971

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

goodk

ASKER

super