jilljill1
asked on
Where do I insert Javascript superfish to enhance my nav bars?
Hello experts,
I am very new to building web pages, and have tried to insert the superfish code into my html file to enable the javascript, without success.
I am under the impression that I have to have the superfish.js file in the same folder as all the other files for the webpage.
Can anyone tell me exactly where to put the script that goes near the ul to enable superfish? I don't know why I am struggling with this so, but here I am.
Thank you in advance for any assistance.
jill
I am very new to building web pages, and have tried to insert the superfish code into my html file to enable the javascript, without success.
I am under the impression that I have to have the superfish.js file in the same folder as all the other files for the webpage.
Can anyone tell me exactly where to put the script that goes near the ul to enable superfish? I don't know why I am struggling with this so, but here I am.
Thank you in advance for any assistance.
jill
* {
margin : 0;
padding : 0;
}
body {
background-image : url(burlap.gif);
font-family : tahoma, verdana, sans-serif;
}
#wrapper {
width : 50em;
height : 60em;
background-color : #669933;
margin : 1.5em auto;
}
#header{
display:block;
}
#branding1 {
width : 50em;
height : 0.5em;
background-color : #669933;
}
#branding2 {
width : 50em;
height : 6em;
background-image : url(paper2.gif);
}
#branding2 img {
padding : 1em;
}
#navbar {
background-image:url(navbartint2.gif);
height:1.5em;
}
#navbar img {
visibility : visible;
}
#navbar img:hover {
visibility : visible;
}
#navbar ul {
list-style-type : none;
}
#navbar li {
float : left;
position : relative;
padding-bottom : 0.3em;
padding-left : 1.3em;
padding-right : 1.3em;
padding-top : 0.2em;
}
#navbar li.about {
float : left;
position : relative;
background-color:#669933;
width:6em;
display:block;
font-size:95%;
padding-left:.5em;
padding-right:.2em;
}
#navbar li.departments {
float : left;
position : relative;
background-color:#669933;
width:9em;
display:block;
font-size:95%;
padding-left:.5em;
padding-right:.2em;
}
#navbar li.specialties {
float : left;
position : relative;
background-color:#669933;
width:11em;
display:block;
font-size:95%;
padding-left:.5em;
padding-right:.2em;
}
#navbar a, #navbar a:link, #navbar a:visited {
text-decoration : none;
font-family : verdana, tahoma, sans-serif;
font-size : 95%;
color : #cccc99;
display : block;
height : 1.5em;
}
#navbar a:hover {
color : #cc9933;
}
#navbar li ul {
position : absolute;
z-index : 100;
visibility : hidden;
}
#navbar li:hover ul {
visibility : visible;
}
}
#navbar li:hover ul li a {
background-color : #669933;
color : #cc9933;
text-align : left;
display : block;
width : 6em;
padding : 0;
height : auto;
}
#navbar li:hover ul li a:hover {
background-color : #669933;
color : #000000;
}
#left {
width : 12.5em;
height : 50em;
background-color : #cc9933;
float : left;
}
#right{
width:11em;
height:30em;
background-color:#cc6600;
color:#ffffff;
float:right;
clear:right;
}
#bulk{
background-color:#ffffff;
width:26.5em;
height:25em;
float:left;
}
***************************
<!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 name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<title>Fresh and Wholesome</title>
<link href="freshandwholesomerebuild1.css" rel="stylesheet" type="text/css"
/>
</head>
<body>
<!-- Wrapper sets the layout width -->
<div id="wrapper">
<div id="branding1"></div>
<div id="branding2"><img src="fwlogo.png" alt="Fresh and Wholesome
Logo" style=
"width:25%" />
</div>
<div id="navbar">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li>
<a href="about.html">About Us</a>
<ul>
It doesn't matter where you put the .js file as long as the path to it is correct. Just put the <script> element after the <link> element.
ASKER
I'm glad that it was you that responded. I didn't get to say thanks for the response about the CSS gap, I thought that I had deleted that question.
I think I have the part that I put this in the <head>
<script type="text/javascript" src="superfish.js"></scrip t>
Then, is the only thing that I have to do is put this with the <ul> element that it applies to?
<script type="text/javascript">
$(document).ready(function () {
$('ul.sf-menu').superfish( );
});
</script>
I am confused about where below this code should go. I have looked at many tutorials, and perhaps in this area, I am learning impaired. Ugh.
<div id="navbar">
<ul>
<li class="selected"><a href="index.html">Home</a> </li>
<li>
<a href="about.html">About Us</a>
<ul>
<li class="about"><a href="history.html">Our History</a></li>
<li class="about"><a href="mission.html">Our Mission</a></li>
<li class="about"><a href="team.html">Our Team</a></li>
</ul>
</li>
<li>
<a href="departments.html">De partments< /a>
<ul>
<li class="departments"><a href="produce.html">Produc e</a></li>
<li class="departments"><a href="dairy.html">Dairy</a ></li>
<li class="departments"><a href="frozen.html">Frozen< /a></li>
<li class="departments"><a href="meat.html">Meat and
Cheese</a></li>
<li class="departments"><a href="ecofriendly.html">Ec o
Friendly</a></li>
<li class="departments"><a href="grocery.html">Grocer y</a></li>
<li class="departments"><a href="haba.html">Health and
Beauty</a></li>
</ul>
</li>
<li>
<a href="specialities.html">S pecialties </a>
<ul>
<li class="specialties"><a href="supplement.html">Sup plement
Specialist</a></li>
<li class="specialties"><a href="glutenfree.html">Glu ten Free
Products</a></li>
<li class="specialties"><a href="vegetarian.html">Veg etarian
and Vegan</a></li>
<li class="specialties"><a href="smoothie.html">Smoot hie and
Juice Bar</a></li>
</ul>
</li>
<li><a href="menus.html">Menus</a ></li>
<li><a href="directions.html">Dir ections</a ></li>
<li><a href="contact.html">Contac t Us</a></li>
</ul>
Thanks for your help so far.
Jill
I think I have the part that I put this in the <head>
<script type="text/javascript" src="superfish.js"></scrip
Then, is the only thing that I have to do is put this with the <ul> element that it applies to?
<script type="text/javascript">
$(document).ready(function
$('ul.sf-menu').superfish(
});
</script>
I am confused about where below this code should go. I have looked at many tutorials, and perhaps in this area, I am learning impaired. Ugh.
<div id="navbar">
<ul>
<li class="selected"><a href="index.html">Home</a>
<li>
<a href="about.html">About Us</a>
<ul>
<li class="about"><a href="history.html">Our History</a></li>
<li class="about"><a href="mission.html">Our Mission</a></li>
<li class="about"><a href="team.html">Our Team</a></li>
</ul>
</li>
<li>
<a href="departments.html">De
<ul>
<li class="departments"><a href="produce.html">Produc
<li class="departments"><a href="dairy.html">Dairy</a
<li class="departments"><a href="frozen.html">Frozen<
<li class="departments"><a href="meat.html">Meat and
Cheese</a></li>
<li class="departments"><a href="ecofriendly.html">Ec
Friendly</a></li>
<li class="departments"><a href="grocery.html">Grocer
<li class="departments"><a href="haba.html">Health and
Beauty</a></li>
</ul>
</li>
<li>
<a href="specialities.html">S
<ul>
<li class="specialties"><a href="supplement.html">Sup
Specialist</a></li>
<li class="specialties"><a href="glutenfree.html">Glu
Products</a></li>
<li class="specialties"><a href="vegetarian.html">Veg
and Vegan</a></li>
<li class="specialties"><a href="smoothie.html">Smoot
Juice Bar</a></li>
</ul>
</li>
<li><a href="menus.html">Menus</a
<li><a href="directions.html">Dir
<li><a href="contact.html">Contac
</ul>
Thanks for your help so far.
Jill
Either put that after the <ul> or after the other <script> element. And don't forget that you need to load jQuery as well for it to work.
ASKER
Do I put that code under each <ul> that has drop down categories? Like below? Or just once? Then where do I put the jquery file?
<div id="navbar">
<ul>
<li class="selected"><a href="index.html">Home</a> </li>
<li>
<a href="about.html">About Us</a>
<ul>
<script type="text/javascript">
$(document).ready(function () {
$('ul.sf-menu').superfish( );
});
</script>
<li class="about"><a href="history.html">Our History</a></li>
<li class="about"><a href="mission.html">Our Mission</a></li>
<li class="about"><a href="team.html">Our Team</a></li>
</ul>
</li>
<li>
<a href="departments.html">De partments< /a>
<ul>
<li class="departments"><a href="produce.html">Produc e</a></li>
<li class="departments"><a href="dairy.html">Dairy</a ></li>
<li class="departments"><a href="frozen.html">Frozen< /a></li>
<li class="departments"><a href="meat.html">Meat and
Cheese</a></li>
<li class="departments"><a href="ecofriendly.html">Ec o
Friendly</a></li>
<li class="departments"><a href="grocery.html">Grocer y</a></li>
<li class="departments"><a href="haba.html">Health and
Beauty</a></li>
</ul>
</li>
<li>
<a href="specialities.html">S pecialties </a>
<ul>
<li class="specialties"><a href="supplement.html">Sup plement
Specialist</a></li>
<li class="specialties"><a href="glutenfree.html">Glu ten Free
Products</a></li>
<li class="specialties"><a href="vegetarian.html">Veg etarian
and Vegan</a></li>
<li class="specialties"><a href="smoothie.html">Smoot hie and
Juice Bar</a></li>
</ul>
</li>
<li><a href="menus.html">Menus</a ></li>
<li><a href="directions.html">Dir ections</a ></li>
<li><a href="contact.html">Contac t Us</a></li>
</ul>
<div id="navbar">
<ul>
<li class="selected"><a href="index.html">Home</a>
<li>
<a href="about.html">About Us</a>
<ul>
<script type="text/javascript">
$(document).ready(function
$('ul.sf-menu').superfish(
});
</script>
<li class="about"><a href="history.html">Our History</a></li>
<li class="about"><a href="mission.html">Our Mission</a></li>
<li class="about"><a href="team.html">Our Team</a></li>
</ul>
</li>
<li>
<a href="departments.html">De
<ul>
<li class="departments"><a href="produce.html">Produc
<li class="departments"><a href="dairy.html">Dairy</a
<li class="departments"><a href="frozen.html">Frozen<
<li class="departments"><a href="meat.html">Meat and
Cheese</a></li>
<li class="departments"><a href="ecofriendly.html">Ec
Friendly</a></li>
<li class="departments"><a href="grocery.html">Grocer
<li class="departments"><a href="haba.html">Health and
Beauty</a></li>
</ul>
</li>
<li>
<a href="specialities.html">S
<ul>
<li class="specialties"><a href="supplement.html">Sup
Specialist</a></li>
<li class="specialties"><a href="glutenfree.html">Glu
Products</a></li>
<li class="specialties"><a href="vegetarian.html">Veg
and Vegan</a></li>
<li class="specialties"><a href="smoothie.html">Smoot
Juice Bar</a></li>
</ul>
</li>
<li><a href="menus.html">Menus</a
<li><a href="directions.html">Dir
<li><a href="contact.html">Contac
</ul>
I meant the outer <ul>. Don't add it in more than one place.
The <script> element to load jQuery should be the first <script> element in the page.
The <script> element to load jQuery should be the first <script> element in the page.
ASKER
So I insert the jquery file in the beginning. I am not sure which file it is. I went to download on jQuery, is it jquery1.2.3.js It's a pretty long page of script, I wasn't sure it was the right one?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you use this URL to load jquery it will autmotatically always use the most recent stable version:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
ASKER
thank you.