Lava Lamp Navigation Menu - January 27, 2013

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Lava Lamp Navigation Menu - January 27, 2013

Post by supersonictt »

Lava Lamp Navigation Menu (refined) v1.0.3

Original thread for the creator:
viewtopic.php?f=42&t=33889
Please read the copyright stuff in the original post :)

*Information*
The zip file has two extensions:
1. LavaLamp Nav. 1: This one has more options for rounded menu and hover box. It doesn't have borders in between the navigation items.
2. LavaLamp Nav. 2: This one has borders in between the navigation items but has less options.
NOTE: Drop the first extension, double click on it and edit the first category "Menu items", add at least 3 items with the first one to be selected. Click OK and then preview. Then drop the second extension and do the same the click preview to see the difference between both of them.

*Some New stuff*
1. The menu can be transparent.
2. Dropping the extension in the design view will determine the size and position of the menu.
3. Borders for the menu and hover box (Extension 1).
4. More font settings.
5. Text shadow.
6. Added hover box speed and reset time. Easing when the hover box moves and resets.
7. You tell me if you find anything new other than the original version :)

*Updates*
In version 1.0.2:
• Fixed the rounded corners in all major browsers (I am using IE10, didn't test it on previous versions).
• Fixed gradient in IE (I am using IE10, didn't test it on previous versions).

In version 1.0.3:
• Fixed the shadow property. Now it works in all major browsers.

*Download*
http://www.mediafire.com/?b1v95lpz5eik8iv

Enjoy :)
Last edited by supersonictt on Mon Jan 28, 2013 1:05 am, edited 7 times in total.
User avatar
amrajadhyaksha
 
 
Posts: 157
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by amrajadhyaksha »

Good work, Supersonictt.
Would add more value if the links could also support iframe.
They do support all file formats: web site / internal page / mail address, file, smart link.
See if you can add iframe support too.
Good looking job otherwise.
presto
 
 
Posts: 127
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by presto »

Thank you for your work. There are unfortunately some bugs in it (I only checked Lavalamp 1). There are some undefined extension-mager-variables like $.......$. And you should not use id for "no selected" but instead classes since id should be unique and are not allowed to be used several times on one page. At least leave the id empty if not selected. You can see all trhis clearly when you have a look at the generated html code.

One additional drawback is the fixed size of the extension, what means the size is at least 470 x 100. Please set it to let's say 10 x 10. The reason is if you put the extension on a layer that ist less high than the extension, the layer can't be a properly working header or footer.

Besides it makes me very unhappy that you have pre-defined the following:

#fix {
width: 1200px;
margin: 100px auto;
}

This makes it nearly impossible to place the Menu properly. So please delete this div.

Actually it would be very nice if you could provide us with your xwb-code in order to make some amendments. I personally would prefer to have different colors for the menu item text in normal and in hover state.

#blob {
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from($hovercolorunderside$), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
border: 0px solid #FFFFFF;

}

#nav {
position: relative;
background-color: #FFAD5B;
background: ;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
float: left;
border: 10px solid #FFAD5B;
}

#nav li {
float: left;
list-style: none;
border-right: $borderrightsize$px solid $borderrightcolor$;
border-left: $borderleftsize$px solid $borderleftcolor$;

}

#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: left;
font-size: 28px;
font-family: helvetica, arial, sans-serif;
font-weight: none;
font-style: none;
text-decoration: none;
text-shadow: 0px 0px 10px #000000;
padding: 0px 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="wb_Extension1" style="position:absolute;left:244px;top:69px;width:556px;height:100px;z-index:0;">
<div id="fix">
<ul id="nav">
<ul><li id="selected"><a href="#">Home</a></li><li id="no selected"><a href="#">Home</a></li><li id="no selected"><a href="#">Home</a></li><li id="no selected"><a href="#">Home</a></li></ul>
</ul>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script></div>
</div>
</body>
</html>
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

@ presto:
Thank you for the feedback.
Well, yes, the hover box colors have issues, I will fix them (sorry for that, as the extension went through a lot of changes between LavaLamp 1 and LavaLamp 2 it made me forgot to include some stuff).
The code of the css files is provided by the first creator of the extension, and I checked the original source code and these codes are there, so I didn't change anything. I think I tried to remove the 1200px div but it made some issues, I will check that again.

About the size of the extension, I made it this way so in the beginning for the users to distinguish between the two extension (as they can read the description), but you are right, I will make it 50 by 50, good?

The "$hovercolorunderside$" will be fixed, thanks for that.

For this code:

Code: Select all

#nav li {
float: left;
list-style: none;
[b]border-right: $borderrightsize$px solid $borderrightcolor$;
border-left: $borderleftsize$px solid $borderleftcolor$;[/b]
}
border-right and border-left are for extension 2 and they shouldn't be in extension 1, so they will be removed.

And for this code:

Code: Select all

#nav {
position: relative;
background-color: #FFAD5B;
[b]background: ;[/b]
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
float: left;
border: 10px solid #FFAD5B;
}
I had to put the background property this way if the user wants to choose transparent background, so if there is a way in EB4 to put a color property AND transparent option in the same field please someone let me know :)
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

Download link is updated with the fixes above. Please re-download.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

amrajadhyaksha wrote:Good work, Supersonictt.
Would add more value if the links could also support iframe.
They do support all file formats: web site / internal page / mail address, file, smart link.
See if you can add iframe support too.
Good looking job otherwise.
Thanks for the kind words :)
I will try to add the iframe option soon :)
User avatar
amrajadhyaksha
 
 
Posts: 157
Joined: Thu Apr 09, 2009 2:26 am
Location: mumbai
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by amrajadhyaksha »

One more suggestion: Instead of selecting a link before publishing, can the page show which link is active, as in other menus of WWB?
presto
 
 
Posts: 127
Joined: Tue Aug 24, 2010 5:19 pm
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by presto »

Just an additional remark: Value of attribute "ID" always must be a single token, so instead of "no select" it should read "noselect". But please change ID to CLASS in your xsl-Code. Otherwise it's no valid HTML. Therefor you should also change the original js at this position as:

var nav = $(this),
currentPageItem = $('.selected', nav),
blob,
reset;


That should do the job.

And please change #fix as follow:

#fix {
margin: 0px auto;
}

I really would appreciate if you could add the xwb to your download.

Kind regards
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

presto wrote:Just an additional remark: Value of attribute "ID" always must be a single token, so instead of "no select" it should read "noselect". But please change ID to CLASS in your xsl-Code. Otherwise it's no valid HTML. Therefor you should also change the original js at this position as:

var nav = $(this),
currentPageItem = $('.selected', nav),
blob,
reset;


That should do the job.

And please change #fix as follow:

#fix {
margin: 0px auto;
}

I really would appreciate if you could add the xwb to your download.

Kind regards
I made all the changes you suggested, thanks a lot for that :)
I will publish the file with the xwb files as well. But one more thing, actually 2 requests from amrajadhyaksha:
1. To add an iframe option in the links.
2. To indicate the current page as selected without copying and pasting the menu in every page and modify "selected" for each page.
Can you add these functions?

Thanks a lot.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

Ok, download link is updated.
All the files are included now :)
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by protectourlands »

The rounded corners in ver 1 work fine in Chrome and Safari, but not in FF and IE. (IE10)

Any thoughts? Thank you
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

protectourlands wrote:The rounded corners in ver 1 work fine in Chrome and Safari, but not in FF and IE. (IE10)

Any thoughts? Thank you
I will test it and report back :) give me a day and I will do it :)
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by protectourlands »

Thank you very much.

Also found that the hover box color does not apply in IE. At least with white both top and bottom. Other browsers show white, but IE shows blue.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu (refined) - August 09 2012

Post by supersonictt »

protectourlands wrote:Thank you very much.

Also found that the hover box color does not apply in IE. At least with white both top and bottom. Other browsers show white, but IE shows blue.
Hello,

I updated and fixed some stuff, please have a look at the first post and download the new version.
Please report back :)

Thank you.
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by protectourlands »

Supersonictt

Thank you so very much for taking the time to do this Supersonictt. The rounded corners and color features of the menu are working fantastic now in all browsers.

The only issue I can find now is minor: the shadowing does not work in FF and IE. Looks great in Chrome and Safari though.

Great extension!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by supersonictt »

protectourlands wrote:Supersonictt

Thank you so very much for taking the time to do this Supersonictt. The rounded corners and color features of the menu are working fantastic now in all browsers.

The only issue I can find now is minor: the shadowing does not work in FF and IE. Looks great in Chrome and Safari though.

Great extension!
Your welcome :) glad you using it :)

About the issue you reported: yes I expected that, and I will fix it very soon :)

*****EDIT*****
It is fixed now, please download version 1.0.3 from the first post.
If you find any other issues please report back :)

Thanks ;)
Last edited by supersonictt on Mon Jan 28, 2013 1:06 am, edited 1 time in total.
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by protectourlands »

That will be terrific! Thank you.
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by supersonictt »

protectourlands wrote:That will be terrific! Thank you.
You were just a bit faster than me in replying ;)

I just updated it to version 1.0.3 and the shadow property is fixed now. Please download it from the fist post.
If you find any issue please report back :)

Enjoy ;)
User avatar
protectourlands
 
 
Posts: 426
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by protectourlands »

Working perfectly now Supersonictt. You're amazing!
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Lava Lamp Navigation Menu - January 27, 2013

Post by supersonictt »

praded2007 wrote:Hello!
I downloaded your lava lamp menu ver1.0.3 next i choose manual setup but it is not showed in toolbar.
Previous version(1.0.0.0) was showed but did not work correctly. There wasn't blue frame that follows cursor.
Could you help me??Please
It is showing for me on the toolbar... Maybe you need to remove some unused extensions. Note that installing a lot of extensions (around 200) will not make all extensions appear.
Post Reply