Beautiful Background Image Navigation (Updated 1/3/2011)
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Beautiful Background Image Navigation (Updated 1/3/2011)
Version 1.4.0.0
Build with 2.6.0 Extension builder
Document type: HTML 4.01 Transitional
More info about it:
http://tympanus.net/codrops/2010/05/05/ ... th-jquery/
Futures
4 sub menus (Original source provide 3) If you want to use 3 or less or none just remove the text.
Text Uppercase removed
Different transparent blocks to choose what you like ( i have included some, you can create your own if you like, make sure they are transparent)
Change menu position
Change Main bar color
Change width size * Read notes *
Change Main Title font size - color
Target for all links *new*
2 effects to choose for submenu *new*
Download
http://dl.dropbox.com/u/8766047/Beautif ... gation.rar
Thanks
Build with 2.6.0 Extension builder
Document type: HTML 4.01 Transitional
More info about it:
http://tympanus.net/codrops/2010/05/05/ ... th-jquery/
Futures
4 sub menus (Original source provide 3) If you want to use 3 or less or none just remove the text.
Text Uppercase removed
Different transparent blocks to choose what you like ( i have included some, you can create your own if you like, make sure they are transparent)
Change menu position
Change Main bar color
Change width size * Read notes *
Change Main Title font size - color
Target for all links *new*
2 effects to choose for submenu *new*
Download
http://dl.dropbox.com/u/8766047/Beautif ... gation.rar
Thanks
Last edited by smartmedia on Tue Mar 01, 2011 3:33 pm, edited 2 times in total.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
- amrajadhyaksha
-
- Posts: 157
- Joined: Thu Apr 09, 2009 2:26 am
- Location: mumbai
- Contact:
Re: Beautiful Background Image Navigation (Released)
Lovely job. Hardly requires an explanation.
Can the bg image sizes be changed? I understand that all 3 images have to be equal in size, but do they have to be 800 x 542?
Can the Main menu bar's size be varied?
BTW, may your enthusiasm last to bring the codrops repertoire here as lovely extensions for WWB users, may I present my personal wishlist here?
1 http://tympanus.net/codrops/2009/12/16/ ... y-and-css/
2 http://tympanus.net/codrops/2010/05/14/ ... th-jquery/
3 http://tympanus.net/codrops/2010/04/29/ ... th-jquery/
4 http://tympanus.net/codrops/2011/02/18/ ... e-sliders/ so much here to drool over
5 http://tympanus.net/codrops/2011/02/09/ ... nail-flip/
6 http://tympanus.net/codrops/2011/01/28/ ... eb-design/ wing cheng, cupcup
7 http://tympanus.net/Tutorials/ElegantAccordion/ Any good accordion that goes the full length of the screen with wide panels unfolding out, with no restriction on number of panels
8 http://tympanus.net/codrops/2010/01/23/ ... -inspired/ Inspiring stuff here
Phew!
Sorry about the list, and thanks, perhaps in anticipation?
Can the bg image sizes be changed? I understand that all 3 images have to be equal in size, but do they have to be 800 x 542?
Can the Main menu bar's size be varied?
BTW, may your enthusiasm last to bring the codrops repertoire here as lovely extensions for WWB users, may I present my personal wishlist here?
1 http://tympanus.net/codrops/2009/12/16/ ... y-and-css/
2 http://tympanus.net/codrops/2010/05/14/ ... th-jquery/
3 http://tympanus.net/codrops/2010/04/29/ ... th-jquery/
4 http://tympanus.net/codrops/2011/02/18/ ... e-sliders/ so much here to drool over
5 http://tympanus.net/codrops/2011/02/09/ ... nail-flip/
6 http://tympanus.net/codrops/2011/01/28/ ... eb-design/ wing cheng, cupcup
7 http://tympanus.net/Tutorials/ElegantAccordion/ Any good accordion that goes the full length of the screen with wide panels unfolding out, with no restriction on number of panels
8 http://tympanus.net/codrops/2010/01/23/ ... -inspired/ Inspiring stuff here
Phew!
Sorry about the list, and thanks, perhaps in anticipation?
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Released)
You can choose different image for submenu background.Can the bg image sizes be changed? I understand that all 3 images have to be equal in size, but do they have to be 800 x 542?
Can the Main menu bar's size be varied?
Main image can be more than 800 x 542, will not be resized, will show up 1:1.
I will look into change the main bar size...
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated)
Hi..
Added:
Change Menu width size. Please make sure you read the notes.
In order to work properly you need to set the 1 & 2 image width equally.
Example:
Set the Menu width to 602 ( 600 + 2 px, if you don't give 2 or 3 px more then, the third image will show under the menu)
Set the 1 image width to 200
Set the 2 image width to 400
You done.
If you have any question please post it here.
PS. If you change the Menu size you need to create different transparent sub images to cover all area.
That's all.. Enjoy it.
Added:
Change Menu width size. Please make sure you read the notes.
In order to work properly you need to set the 1 & 2 image width equally.
Example:
Set the Menu width to 602 ( 600 + 2 px, if you don't give 2 or 3 px more then, the third image will show under the menu)
Set the 1 image width to 200
Set the 2 image width to 400
You done.
If you have any question please post it here.
PS. If you change the Menu size you need to create different transparent sub images to cover all area.
That's all.. Enjoy it.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
- amrajadhyaksha
-
- Posts: 157
- Joined: Thu Apr 09, 2009 2:26 am
- Location: mumbai
- Contact:
Re: Beautiful Background Image Navigation (Updated)
Tx, you are thorough.
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
Redesigning my website, gonna try this one, Thanks!!
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
If I take a look at the preview my menu shows up as a textmenu at the left side of my webpage.
If you use this extension and you take a look at the preview, should it be shown good or do you first have to publish it?
I hope someone can help me
If you use this extension and you take a look at the preview, should it be shown good or do you first have to publish it?
I hope someone can help me
- pedro-pecker
-
- Posts: 38
- Joined: Thu Feb 26, 2009 2:22 pm
- Location: Devon UK
Re: Beautiful Background Image Navigation (Updated)
on preview it shows like the image in the first post!Reptilicious wrote:If I take a look at the preview my menu shows up as a textmenu at the left side of my webpage.
If you use this extension and you take a look at the preview, should it be shown good or do you first have to publish it?
I hope someone can help me
I love this smartmedia
Very nice easy to use.
Is there any way to add more menu's (more than the three it has??)
Regards
Pedro
Pedro
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
Thanks for your reply!pedro-pecker wrote:on preview it shows like the image in the first post!Reptilicious wrote:If I take a look at the preview my menu shows up as a textmenu at the left side of my webpage.
If you use this extension and you take a look at the preview, should it be shown good or do you first have to publish it?
I hope someone can help me
Without any adjustment, this is what the extension shows on preview:
Main Site
Sub Title 1
Sub Title 2
Sub Title 3
Sub Title 4
Main Site
Main Site
This textmenu is displayed at the left corner of the background image. Is there some default in WB7 I need to change, before I can use this extension?
EDIT: Found my own answer.. changed the document type from none to HTML
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
When I published this extension for the first time, I saw the images. I have changed an image and now I can't see the images anymore. I have already removed all the files and published again, but still can't see the background images. Can you tell me if you see the images or maybe someone can tell me what I am doing wrong.
This is the link: http://test.reptilicious.nl/test/test.html
This is the link: http://test.reptilicious.nl/test/test.html
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated)
Hi..
Please look at css folder where you have publish for style.css file. Open it and look for something like this
.bg1{
background-image: url(../images/Alfa.jpg);
}
and post it here.
I test it my self, i export locally all project without problem.
Please look at css folder where you have publish for style.css file. Open it and look for something like this
.bg1{
background-image: url(../images/Alfa.jpg);
}
and post it here.
I test it my self, i export locally all project without problem.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated)
Hi..
I can put target for _self - _parent - but for bookmark and inline frame i don't know how...
I can put target for _self - _parent - but for bookmark and inline frame i don't know how...
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
I couldn't response sooner...there are only 2 files in the css folder: style.css and styleIE6.csssmartmedia wrote:Hi..
Please look at css folder where you have publish for style.css file. Open it and look for something like this
.bg1{
background-image: url(../images/Alfa.jpg);
}
and post it here.
I test it my self, i export locally all project without problem.
(It seems that I have the same problem with the Fresh Bottom SlideOut Menu)
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated)
Hi..
Ok.. please do the following.
1) Create a new web site.
2) Insert the extension
3) export to local folder
4) Open the folder you have export the web site ( You must see two folders, css and images )
5) open the index.html or what ever you have named the page
Tell me if everything looks ok...
If not, go to css folder and open style.css, then try to find the line
.bg1{
background-image: url(*********************);
}
where ***** is what ever has inside, and posted the ******* here.
Ok.. please do the following.
1) Create a new web site.
2) Insert the extension
3) export to local folder
4) Open the folder you have export the web site ( You must see two folders, css and images )
5) open the index.html or what ever you have named the page
Tell me if everything looks ok...
If not, go to css folder and open style.css, then try to find the line
.bg1{
background-image: url(*********************);
}
where ***** is what ever has inside, and posted the ******* here.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated)
I did an export without any changes and everything works fine. I made another export with my images (only changed the images) and I don't see the images.
This is what the css file says:
}
.bg1{
background-image: url(../images/Pumi_216%542.JPG);
}
.bg2{
background-image: url(../images/Pyth_057 542 Black.jpg);
}
.bg3{
background-image: url(../images/Caro_199 542.jpg);
}
This is what the css file says:
}
.bg1{
background-image: url(../images/Pumi_216%542.JPG);
}
.bg2{
background-image: url(../images/Pyth_057 542 Black.jpg);
}
.bg3{
background-image: url(../images/Caro_199 542.jpg);
}
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated)
Hi..
If the export worked that means is something wrong with the pictures you using. Check the names to be without spaces, i don't know anything more that may cause malfunction. Also try to update into the new version 1.4.0.0
If the export worked that means is something wrong with the pictures you using. Check the names to be without spaces, i don't know anything more that may cause malfunction. Also try to update into the new version 1.4.0.0
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
- BaconFries
-
- Posts: 5371
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
When using images or any files please do not use names with spaces, special characters, uppercase lettering... also only use file extensions with lowercase lettering :example jpg not JPG
Incorrect
images/Pumi_216%542.JPG
images/Pyth_057 542 Black.jpg
images/Caro_199 542.jpg
Correct
images/pumi_216542.jpg
images/pyth_057542 Black.jpg
images/caro_199542.jpg
Incorrect
images/Pumi_216%542.JPG
images/Pyth_057 542 Black.jpg
images/Caro_199 542.jpg
Correct
images/pumi_216542.jpg
images/pyth_057542 Black.jpg
images/caro_199542.jpg
-
-
- Posts: 29
- Joined: Tue Nov 09, 2010 3:54 pm
- Contact:
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Updated the extention, changed the names and it works!
Thank you very much for your help!!
Thank you very much for your help!!
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Wow man. Its awesome. I will give it a try.
Thanks.
Joe
Thanks.
Joe
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Chris its only works with 3 pieces? If i need to put 5?
Tahnks
Joe
Tahnks
Joe
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Φίλε μου, αυτό το scriptaki γράφτηκε για 3 φωτογραφίες, δεν είναι δικό μου... Μάλλον θα πρέπει να αρκεστείς σε αυτό..
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Euxaristo poly.
Etoimazeis kai alla wraia scripts?
Joe
Etoimazeis kai alla wraia scripts?
Joe
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
I downloaded this ages ago and now when I find I wanted to integrate it into WB there is no wbx file, nor any notes (which you refer to) in the download you provided just some css , images etc to show an example.
So how is this a proper WB extension and how do I integrate it into WB? Something is missing.
Also the auto import does not recognise rar files only zips (I know they are both compressed formats but WB sees them as different.
So how is this a proper WB extension and how do I integrate it into WB? Something is missing.
Also the auto import does not recognise rar files only zips (I know they are both compressed formats but WB sees them as different.
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Hi..
If you have download the rar file, just extract it in a folder, then select Extension Manager from menu.
When the window opens, select manual install and choose the extension from the folder you have extracted. In properties window of the extension on every option are given enough information to understand how is working.
If you have download the rar file, just extract it in a folder, then select Extension Manager from menu.
When the window opens, select manual install and choose the extension from the folder you have extracted. In properties window of the extension on every option are given enough information to understand how is working.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
smartmedia wrote:Hi..
If you have download the rar file, just extract it in a folder, then select Extension Manager from menu.
When the window opens, select manual install and choose the extension from the folder you have extracted. In properties window of the extension on every option are given enough information to understand how is working.
But I already tried that - as I said , there is no extension ie wbx file in the download at all so how can I "chose the extension" when it isn't there!
-
-
- Posts: 66
- Joined: Wed Jan 26, 2011 7:51 pm
- Location: Hellas
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Hi..
I download it 1 hour a go when i read your post and the file was inside. Please re-download it again and try... I don't have any other reports from others, perhaps something went wrong when you download it the first time.
I download it 1 hour a go when i read your post and the file was inside. Please re-download it again and try... I don't have any other reports from others, perhaps something went wrong when you download it the first time.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">jQuery.noConflict();</script>
- amrajadhyaksha
-
- Posts: 157
- Joined: Thu Apr 09, 2009 2:26 am
- Location: mumbai
- Contact:
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Hi,
There is an even more attractive first cousin of this menu, on the same site, I am sure you must have seen it.
http://tympanus.net/Development/Sliding ... mple9.html
All the best, in anticipation.
There is an even more attractive first cousin of this menu, on the same site, I am sure you must have seen it.
http://tympanus.net/Development/Sliding ... mple9.html
All the best, in anticipation.
- me.prosenjeet
-
- Posts: 1265
- Joined: Mon Dec 24, 2007 1:50 pm
- Location: Lucknow
- Contact:
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Download link is working finehinkey wrote:Hi there,
it seems that the download link ist broken.. get a NOT FOUND message
Thks Hajo
Check the new Chat GPT and Malware detect extensions at the link below
Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
Check my WB Extensions
Check my WB Templates
---------------------------------------------------------
www.Lucknowwebs.com
- BaconFries
-
- Posts: 5371
- Joined: Thu Aug 16, 2007 7:32 pm
Re: Beautiful Background Image Navigation (Updated 1/3/2011)
Please read my reply to.you at thr follow
viewtopic.php?f=29&t=57414
viewtopic.php?f=29&t=57414