Beautiful Background Image Navigation (Updated 1/3/2011)

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.

There are already more than 250 extensions available!

Beautiful Background Image Navigation (Updated 1/3/2011)

Postby smartmedia » Tue Feb 22, 2011 6:43 pm

Version 1.4.0.0
Build with 2.6.0 Extension builder
Document type: HTML 4.01 Transitional

Image

More info about it:
http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-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*

Image

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>
smartmedia
 
Posts: 74
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Beautiful Background Image Navigation (Released)

Postby amrajadhyaksha » Wed Feb 23, 2011 4:22 am

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/creating-a-rotating-billboard-system-with-jquery-and-css/
2 http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/
3 http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/
4 http://tympanus.net/codrops/2011/02/18/20-unique-and-creative-image-sliders/ so much here to drool over
5 http://tympanus.net/codrops/2011/02/09/fullscreen-gallery-with-thumbnail-flip/
6 http://tympanus.net/codrops/2011/01/28/depth-perspective-web-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/24-beautiful-hotel-website-designs-to-get-inspired/ Inspiring stuff here
Phew!
Sorry about the list, and thanks, perhaps in anticipation? :D
User avatar
amrajadhyaksha
 
Posts: 180
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai

Re: Beautiful Background Image Navigation (Released)

Postby smartmedia » Wed Feb 23, 2011 6:35 am

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?


You can choose different image for submenu background.
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>
smartmedia
 
Posts: 74
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Beautiful Background Image Navigation (Updated)

Postby smartmedia » Wed Feb 23, 2011 10:33 am

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.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
smartmedia
 
Posts: 74
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Beautiful Background Image Navigation (Updated)

Postby amrajadhyaksha » Wed Feb 23, 2011 4:13 pm

Tx, you are thorough.
User avatar
amrajadhyaksha
 
Posts: 180
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai

Re: Beautiful Background Image Navigation (Updated)

Postby sailor1978 » Wed Feb 23, 2011 11:58 pm

Wooooooow thhis extension is simply amazing. Man, if you do create WBX with all the stuff there's on tympanus, it will then represent a fkn real big added value to WEB BUILDER !!!

Please offer us some more, killer !!

Cheers,

Seb, ex wix.com staff
sailor1978
 
Posts: 55
Joined: Mon Oct 20, 2008 8:56 pm

Re: Beautiful Background Image Navigation (Updated)

Postby Reptilicious » Thu Feb 24, 2011 12:04 pm

Redesigning my website, gonna try this one, Thanks!! :)
Reptilicious
 
Posts: 50
Joined: Tue Nov 09, 2010 3:54 pm

Re: Beautiful Background Image Navigation (Updated)

Postby Reptilicious » Thu Feb 24, 2011 3:25 pm

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
Reptilicious
 
Posts: 50
Joined: Tue Nov 09, 2010 3:54 pm

Re: Beautiful Background Image Navigation (Updated)

Postby pedro-pecker » Thu Feb 24, 2011 3:56 pm

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

on preview it shows like the image in the first post!

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
User avatar
pedro-pecker
 
Posts: 62
Joined: Thu Feb 26, 2009 2:22 pm
Location: Devon UK

Re: Beautiful Background Image Navigation (Updated)

Postby Reptilicious » Thu Feb 24, 2011 4:50 pm

pedro-pecker wrote:
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

on preview it shows like the image in the first post!


Thanks for your reply!
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: :idea: Found my own answer.. changed the document type from none to HTML :)
Reptilicious
 
Posts: 50
Joined: Tue Nov 09, 2010 3:54 pm

Re: Beautiful Background Image Navigation (Updated)

Postby Reptilicious » Sat Feb 26, 2011 2:11 pm

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
Reptilicious
 
Posts: 50
Joined: Tue Nov 09, 2010 3:54 pm

Re: Beautiful Background Image Navigation (Updated)

Postby smartmedia » Sat Feb 26, 2011 4:40 pm

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.
infogate
<script type="text/javascript">jQuery.noConflict();</script>
smartmedia
 
Posts: 74
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Beautiful Background Image Navigation (Updated)

Postby pewe » Sun Feb 27, 2011 12:53 am

Nice Extension - very useful

One additional feature that would be nice is to have the ability to select options for the links - similar to the standard link options - ie to open the links using bookmarks and to open in self/new window/inlineframe etc.
Would this be possible?
pewe
 
Posts: 15
Joined: Fri Sep 21, 2007 12:15 pm

Re: Beautiful Background Image Navigation (Updated)

Postby smartmedia » Sun Feb 27, 2011 6:18 pm

Hi..

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>
smartmedia
 
Posts: 74
Joined: Wed Jan 26, 2011 7:51 pm
Location: Hellas

Re: Beautiful Background Image Navigation (Updated)

Postby pewe » Sun Feb 27, 2011 6:53 pm

This is an example of what the link should look like when inserted.

a href="http://www.google.co.uk" target="InlineFrame1" class="style1"

Not sure how you get the properties box to allow the selection of the inline frame though.

Perhaps the guys at Wysiwyg could help?
pewe
 
Posts: 15
Joined: Fri Sep 21, 2007 12:15 pm

Next

Return to Share self-made extensions with other users of WYSIWYG Web Builder

Who is online

Users browsing this forum: dedrent, SUB, Yahoo [Bot] and 3 guests