Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
***Updated 02/01/10***
Meets W3C Standards
Built with Extension Builder 2.0.2
***Update 14/10/09***
Sprite Menu 0.2 Demo
http://justtesting123.comuf.com/sprite/
*****************************************
Sprite Menu 0.2
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
How to use:
Basically make one large image containing all of the buttons needed for your menu, the normal state along the top, the hover state along the bottom. Also they all need to be the same size for easy use I have supplied a basic selection of menus for you to use you still need to import into a graphics package and add menu names to each button please read the notes in each menu button folder for a simple guide for button sizes: Example name buttons Home, About, Faq etc etc..
As always please read the supplied PDF
Authors Site for Demo:
http://www.distinctcorp.com.au/jquery/spritemenu.html
Download:
http://www.mediafire.com/?rkiyyjvmd5l
Meets W3C Standards
Built with Extension Builder 2.0.2
***Update 14/10/09***
Sprite Menu 0.2 Demo
http://justtesting123.comuf.com/sprite/
*****************************************
Sprite Menu 0.2
This is a method of putting together a nice-looking menu in a very quick and easy way. It uses a technique known as CSS Sprites. Instead of trying to manage huge amounts of images, everything is packed into just one file, which means the browser will only have to download one file instead of making multiple requests, and its just a lot easier to manage. The menu is displayed by manipulating the background-position property to display individual sprites in the image.
How to use:
Basically make one large image containing all of the buttons needed for your menu, the normal state along the top, the hover state along the bottom. Also they all need to be the same size for easy use I have supplied a basic selection of menus for you to use you still need to import into a graphics package and add menu names to each button please read the notes in each menu button folder for a simple guide for button sizes: Example name buttons Home, About, Faq etc etc..
As always please read the supplied PDF
Authors Site for Demo:
http://www.distinctcorp.com.au/jquery/spritemenu.html
Download:
http://www.mediafire.com/?rkiyyjvmd5l
Last edited by BaconFries on Mon Nov 29, 2010 8:14 pm, edited 5 times in total.
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
nope ...BaconFries wrote:Thx jordan just hope it easily understood that you need to use the menus supplied or user makes own not really all that hard it you have photoshop, fireworks, corel., Gimp to do this....also thx for index update...
ones you get the idea of up down state,
it's should be very easy to understand, I think.
the only thing ... you write ie. 109 x 34 (=width x height)
but the extension reads height x width
that confused me at first, but ones I got that out of the way.
smooooth sailing, just by wind no motor or battery needed . .
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Evening mywysi ok I have been looking at this and believe I have found the problem with it the script needs the doctype XHTML 1.0 Transitional to work. I have tried it with just HTML 4.01 Transitional and that causes the script to work incorrectly the mouseover effects dont works as they should.
I have tried to use the XHTML 1.0Transitional in WB but the script fails to load and the menus effects dont work....
I have also tried in Extbuilder using XHTML 1.0 Transitional and it works as it should.... Now I dont want to say there might be a bug in WB with the XHTML 1.0 Transitional doctype but if I use the doctype from the extension builder in WB it works correctly I am saying this with a caution as I dont want Pablo to think I am saying there is somthing wrong with WB...
I have also visited the original script to take a look at the doctype used and it is as follows:
Distinctcorp Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
Just using this in WB from original site works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Extension Builder Doctype works
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But using the doctype XHTML 1.0 Transitional in WB doesnt Pablo any input on this would be welcome...
I have tried to use the XHTML 1.0Transitional in WB but the script fails to load and the menus effects dont work....
I have also tried in Extbuilder using XHTML 1.0 Transitional and it works as it should.... Now I dont want to say there might be a bug in WB with the XHTML 1.0 Transitional doctype but if I use the doctype from the extension builder in WB it works correctly I am saying this with a caution as I dont want Pablo to think I am saying there is somthing wrong with WB...
I have also visited the original script to take a look at the doctype used and it is as follows:
Distinctcorp Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
Just using this in WB from original site works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Extension Builder Doctype works
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But using the doctype XHTML 1.0 Transitional in WB doesnt Pablo any input on this would be welcome...
Just using this in WB from original site works
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
The doctype xhtml 1.0 in webbuilder is "complete" for transitional.
I think the best is to make a note in your first post that they need to change the doctype for this menu.
XHTML 1.1 is not the same doctype as XHTML 1.0
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Hello BaconFries,
it's not the doctype that's causing this behavior.
It's Web builder's way of setting the doctype that changes the output.
please try this:
create a sprite menu, one button,
and publish (output) with doctype XHTML 1.0 set in WB.
examine the output file ...
the last line just before the body end, will look like this
<ul id="menu"><li><a href="home.html"/></li></ul></div>
it has changed the code ... !?
Now copy the doctype of that same published (output) file.
and paste it back into your project, into the "page HTML".
set WB's doctype to none, and publish again.
examine the output file ...
the last line just before the body end, will look like this
<ul id="menu"><li><a href="home.html"></a></li></ul></div>
that is the code as it is in your project.
conclusion:
WB is somehow changing the code when XHTML 1.0 is set with WB.
it's not the doctype that's causing this behavior.
It's Web builder's way of setting the doctype that changes the output.
please try this:
create a sprite menu, one button,
and publish (output) with doctype XHTML 1.0 set in WB.
examine the output file ...
the last line just before the body end, will look like this
<ul id="menu"><li><a href="home.html"/></li></ul></div>
it has changed the code ... !?
Now copy the doctype of that same published (output) file.
and paste it back into your project, into the "page HTML".
set WB's doctype to none, and publish again.
examine the output file ...
the last line just before the body end, will look like this
<ul id="menu"><li><a href="home.html"></a></li></ul></div>
that is the code as it is in your project.
conclusion:
WB is somehow changing the code when XHTML 1.0 is set with WB.
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Yer I have noticed that too jordan this also happened with another extension I had made Support says it a fault with the script but I dont understand how it changes the script as we both can see depending on if you use HTML 4.0 ot XHTML 1.0 Transitional in WB only pablo can shine a light on this Suppoert/Pablo it over to you with this ...if you need me to send project to you pablo I will do so.
Jordan I am going to make this in WB without a extension just use the raw script from site see what happens will keep ytou imformed one way or another....
Jordan I am going to make this in WB without a extension just use the raw script from site see what happens will keep ytou imformed one way or another....
Good ... !BaconFries wrote:Yer I have noticed that too jordan this also happened with another extension I had made Support says it a fault with the script but I dont understand how it changes the script as we both can see depending on if you use HTML 4.0 ot XHTML 1.0 Transitional in WB only pablo can shine a light on this Suppoert/Pablo it over to you with this ...if you need me to send project to you pablo I will do so.
Jordan I am going to make this in WB without a extension just use the raw script from site see what happens will keep ytou imformed one way or another....
I already did that, recreate the script (raw) ... same result.
with doctype set in WB it will still change the code . .
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Insert the slash after the <a/> let me know if the menu than works.
This code is valid xhtml.
This code is valid xhtml.
Code: Select all
<!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=ISO-8859-1"/>
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com"/>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<ul id="menu"><li><a href="/home.html"/><a/></li></ul>
</body>
</html>
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Tried this Eddy all it does is give a double menubar on page for original site
<ul id="menu">
<li><a href="/our-team/"></a></li>
<li><a href="/our-profile/"></a></li>
<li><a href="/your-teeth/"></a></li>
<li><a href="/special-occasions/"></a></li>
<li><a href="/your-membership/"></a></li>
<li><a href="/contact-us/"></a></li>
<li><a href="/useful-links/"></a></li>
<li><a href="/book-your-appointment/"></a></li>
</ul>
<ul id="menu">
<li><a href="/our-team/"></a></li>
<li><a href="/our-profile/"></a></li>
<li><a href="/your-teeth/"></a></li>
<li><a href="/special-occasions/"></a></li>
<li><a href="/your-membership/"></a></li>
<li><a href="/contact-us/"></a></li>
<li><a href="/useful-links/"></a></li>
<li><a href="/book-your-appointment/"></a></li>
</ul>
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
yes that's coding 101 for ya . .BaconFries wrote:Yer it work but it puts tags over the menu/nav
you solve one it present another
the answer is this time ... add ... :
<ul id="menu"><li><a href="#">< id="" ></a></li></ul>
BUT if you want to use WB's doctype XHTML 1.0
then you don't need that ... !
cause using WB's doctype setting will not give the <> marks.
so it depends on how you want it to work ...
with Webbuilder setting the doctype ... then <> is enough
with "page HTML" setting the doctype ... then use <id="">
- pedro-pecker
-
- Posts: 38
- Joined: Thu Feb 26, 2009 2:22 pm
- Location: Devon UK
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Hi Nicolas_PL
Ok when adding the width and height it is not the overall size of the menu buttons you have made it is the individual size of one button you use... Example you have made a menu and it is lets say Width 548 x Height 67 so this means that one single button will have a width 109 height 33 approx this is the sizes that you use to display also if you use a five button menu then you need to insert five links if you dont and only add four links then only four buttons will be displayed please also note all buttons used must be of the same size or it wont work correctly this in explained in pdf....
Ok when adding the width and height it is not the overall size of the menu buttons you have made it is the individual size of one button you use... Example you have made a menu and it is lets say Width 548 x Height 67 so this means that one single button will have a width 109 height 33 approx this is the sizes that you use to display also if you use a five button menu then you need to insert five links if you dont and only add four links then only four buttons will be displayed please also note all buttons used must be of the same size or it wont work correctly this in explained in pdf....
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
@Baconfries,
You really need to do something at your hosting.(http://justtesting123.comuf.com/sprite/)
Everytime i watch a demo page made by you my security removes a trojan from the system.
Hans
You really need to do something at your hosting.(http://justtesting123.comuf.com/sprite/)
Everytime i watch a demo page made by you my security removes a trojan from the system.
Hans
Re: Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
Hi Baconfries,
just tried to download this & page said 'set to private'
I'm not having any luck with downloading extensions today lol!
just tried to download this & page said 'set to private'
I'm not having any luck with downloading extensions today lol!
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
I have set it to PVT for the meantime have had a lot on recently with some health issues...but will try to get this and a few more that are set to PVT updated to the latest builder...holding of on doing this as a Pablo is ment to be releasing a New version in the New Year so i would like to wait and rebuild with this as if I was to rebuild now I would to do it again when the update builder is available...
Re: Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
Hi Baconfries,
Hey no worries, take your time as it is not a show stopper.
Wish you all the best for the new year, you've helped me a lot in the past & it is appreciated
Hey no worries, take your time as it is not a show stopper.
Wish you all the best for the new year, you've helped me a lot in the past & it is appreciated
Re: Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
Can you please make the download link available?
- BaconFries
-
- Posts: 5648
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Distinct Corp Sprite Menu 0.2 ***Updated 02/01/10***
Sorry at this time the extension is not avaialble, I may re-release at sometime do definite time, when and if it will only be avaialable from the extension index and for users of WB8.5 and higher only.
Please note that If the extension is shared by others then I do not except any responsibility for the download I also will not offer any assistance with it as is was offered to you rather than myself.
Please note that If the extension is shared by others then I do not except any responsibility for the download I also will not offer any assistance with it as is was offered to you rather than myself.