Lava Lamp Navigation Menu - January 27, 2013

supersonictt · Post by **supersonictt** » Wed Aug 08, 2012 10:44 pm

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

amrajadhyaksha · Post by **amrajadhyaksha** » Thu Aug 09, 2012 4:08 am

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 · Post by **presto** » Thu Aug 09, 2012 1:47 pm

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 · Post by **supersonictt** » Thu Aug 09, 2012 6:11 pm

@ 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 · Post by **supersonictt** » Thu Aug 09, 2012 6:34 pm

Download link is updated with the fixes above. Please re-download.

supersonictt · Post by **supersonictt** » Thu Aug 09, 2012 6:41 pm

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

amrajadhyaksha · Post by **amrajadhyaksha** » Fri Aug 10, 2012 7:10 am

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 · Post by **presto** » Fri Aug 10, 2012 8:13 am

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 · Post by **supersonictt** » Fri Aug 10, 2012 8:18 pm

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 · Post by **supersonictt** » Fri Aug 10, 2012 8:40 pm

Ok, download link is updated.
All the files are included now

protectourlands · Post by **protectourlands** » Thu Jan 17, 2013 12:25 am

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

Any thoughts? Thank you

supersonictt · Post by **supersonictt** » Thu Jan 17, 2013 1:00 pm

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

protectourlands · Post by **protectourlands** » Sat Jan 19, 2013 1:23 am

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 · Post by **supersonictt** » Sun Jan 27, 2013 10:26 am

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.

protectourlands · Post by **protectourlands** » Sun Jan 27, 2013 8:34 pm

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 · Post by **supersonictt** » Mon Jan 28, 2013 12:50 am

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

protectourlands · Post by **protectourlands** » Mon Jan 28, 2013 12:57 am

That will be terrific! Thank you.

supersonictt · Post by **supersonictt** » Mon Jan 28, 2013 1:08 am

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

protectourlands · Post by **protectourlands** » Mon Jan 28, 2013 4:50 am

Working perfectly now Supersonictt. You're amazing!

supersonictt · Post by **supersonictt** » Wed Nov 06, 2013 11:34 pm

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.

www.wysiwygwebbuilder.com

Lava Lamp Navigation Menu - January 27, 2013

Lava Lamp Navigation Menu - January 27, 2013

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

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

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

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

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

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

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

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

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

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

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

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

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

Re: Lava Lamp Navigation Menu - January 27, 2013

Re: Lava Lamp Navigation Menu - January 27, 2013

Re: Lava Lamp Navigation Menu - January 27, 2013

Re: Lava Lamp Navigation Menu - January 27, 2013

Re: Lava Lamp Navigation Menu - January 27, 2013

Re: Lava Lamp Navigation Menu - January 27, 2013