Click/pulldown navigation

Locked
khong
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Wed May 24, 2006 5:55 pm

Click/pulldown navigation

Post by khong » Tue Sep 26, 2006 5:01 am

Hello,

I came across an effect (Javascript I believe) on a Wordpress theme site that I would like to add to my Joomla site. Does anyone know if this is possible or something that could be incorporated into a Joomla site. URL: http://themes.wordpress.net/testrun/?wptheme=343 and the effect is the click/pull down menu.

Thank you,
Ken

User avatar
absalom
Joomla! Ace
Joomla! Ace
Posts: 1199
Joined: Thu Aug 18, 2005 12:37 am
Location: Melbourne, Australia
Contact:

Re: Click/pulldown navigation

Post by absalom » Tue Sep 26, 2006 5:09 am

It's only the Prototype AJAX library with a few more sub-libraries (can't tell which one). It is, however, annoyingly easy to replicate as it's template, not CMS driven.
Design with integrity : Web accessible solutions
http://www.absalom.biz
http://twitter.com/absalomedia

User avatar
duvien
Joomla! Ace
Joomla! Ace
Posts: 1824
Joined: Sun Sep 18, 2005 8:28 pm
Location: Scotland
Contact:

Re: Click/pulldown navigation

Post by duvien » Tue Sep 26, 2006 3:26 pm

khong wrote: Hello,

I came across an effect (Javascript I believe) on a Wordpress theme site that I would like to add to my Joomla site. Does anyone know if this is possible or something that could be incorporated into a Joomla site. URL: http://themes.wordpress.net/testrun/?wptheme=343 and the effect is the click/pull down menu.

Thank you,
Ken
If that's a theme released to the general public, why not just download it and convert it into a Joomla template?

It is a nice theme though i would change a few things myself but i can't seem to locate at http://themes.wordpress.net/
Custom website design | blog | tutorials | Photography | Downloads
Freelance Web Designer/Developer: www.duvien.com

khong
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Wed May 24, 2006 5:55 pm

Re: Click/pulldown navigation

Post by khong » Tue Sep 26, 2006 4:52 pm

Hello - this is the link where I found it: http://themes.wordpress.net/columns/1-c ... e-mod-102/, the theme is called Foliage and was done by Derek Punsalan (http://5thirtyone.com/)
Last edited by khong on Tue Sep 26, 2006 4:57 pm, edited 1 time in total.

User avatar
duvien
Joomla! Ace
Joomla! Ace
Posts: 1824
Joined: Sun Sep 18, 2005 8:28 pm
Location: Scotland
Contact:

Re: Click/pulldown navigation

Post by duvien » Tue Sep 26, 2006 7:18 pm

Thanks for pointing it out. It is a really cool and slick template, and i could do with using it as well with some more modification.

So here's the template for download that i have converted for use with Joomla: www.duvien.com/blog/p,109/

The layout and styles are all there and it is usable. The only thing you need to do is add your own module positionings to the template.

thanks.
Custom website design | blog | tutorials | Photography | Downloads
Freelance Web Designer/Developer: www.duvien.com

User avatar
nekkarcity
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 109
Joined: Thu Aug 18, 2005 6:07 am
Location: Tettnang - Germany
Contact:

Re: Click/pulldown navigation

Post by nekkarcity » Fri Sep 29, 2006 11:59 am

Hi, there is a tutorial about that by Owen Winkler (Wordpress Coredeveloper) and I've already done that on my page, but it's not work with Safari. Safari doesn’t support innerHTML.

http://asymptomatic.net/2006/04/13/2311 ... rdpress/5/

User avatar
duvien
Joomla! Ace
Joomla! Ace
Posts: 1824
Joined: Sun Sep 18, 2005 8:28 pm
Location: Scotland
Contact:

Re: Click/pulldown navigation

Post by duvien » Fri Sep 29, 2006 3:47 pm

nekkarcity wrote: Hi, there is a tutorial about that by Owen Winkler (Wordpress Coredeveloper) and I've already done that on my page, but it's not work with Safari. Safari doesn’t support innerHTML.

http://asymptomatic.net/2006/04/13/2311 ... rdpress/5/
This is different from the template i have converted which uses Script.aculo.us

Also, the one you pointed out uses Moo.fx for the pulldown effect so i'm not sure what you mean by innerHTML?

Have you tried the template i made? The effects are really just the same though using different script to achieve it.

thanks,
Custom website design | blog | tutorials | Photography | Downloads
Freelance Web Designer/Developer: www.duvien.com

User avatar
nekkarcity
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 109
Joined: Thu Aug 18, 2005 6:07 am
Location: Tettnang - Germany
Contact:

Re: Click/pulldown navigation

Post by nekkarcity » Fri Sep 29, 2006 5:52 pm

duvien wrote: This is different from the template i have converted which uses Script.aculo.us ...
I’ve just notice a major difference from the above template and Owen tutorial: It use an additional Script.aculo.us Javascript Library, effects.js to make smooth slice.
duvien wrote: ...

Also, the one you pointed out uses Moo.fx for the pulldown effect so i'm not sure what you mean by innerHTML?
...
The Owen Winkler Method also used Script.aculo.us Javascript Library, prototype.js.

The innerHtml JavaScript function is very popular for Ajax application and in this case to copy from a div tag to another div tag for example my top text to placeholder within an html page.

If this page is complete download  => do innerHtml.
duvien wrote:
Have you tried the template i made? The effects are really just the same though using different script to achieve it.
Thanks for your offer, but I'd prefer to use my own template.



btw: Moo.fx also used Script.aculo.us JavaScript library, prototype-lite.js. I like your page specially your gallery

User avatar
duvien
Joomla! Ace
Joomla! Ace
Posts: 1824
Joined: Sun Sep 18, 2005 8:28 pm
Location: Scotland
Contact:

Re: Click/pulldown navigation

Post by duvien » Fri Sep 29, 2006 6:16 pm

Thanks for the info.

You could just take the pulldown from the template i have converted and adapt it to your own template. But i haven't checked it out on Safari (since i don't own a Mac). So it would also be helpful to know if the template i converted also works on Safari. If not, will try and find a solution. I would suggest you try it out on Firefox first and if it works test it on Safari.

However, It should work on Safari as the template developer actually does his work on a Mac or at least he owns one.

Also, i shouldn't see why the template you have mention does not work on Safari? (check: http://moofx.mad4milk.net/#intro)
It maybe to do with your CSS but i'm not sure as i don't have experience with the one you pointed out.

hope that helps,

thanks,
Custom website design | blog | tutorials | Photography | Downloads
Freelance Web Designer/Developer: www.duvien.com

fotisevangelou
Joomla! Ace
Joomla! Ace
Posts: 1421
Joined: Sun Jan 22, 2006 6:27 pm
Contact:

Re: Click/pulldown navigation

Post by fotisevangelou » Fri Sep 29, 2006 6:55 pm

What you are looking for is probably this:
http://www.dhtmlgoodies.com/index.html? ... de_in_pane
slide in pane

See a demo here: http://www.dhtmlgoodies.com/scripts/sli ... ne-d4.html

:D
Fotis Evangelou / JoomlaWorks

User avatar
nekkarcity
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 109
Joined: Thu Aug 18, 2005 6:07 am
Location: Tettnang - Germany
Contact:

Re: Click/pulldown navigation

Post by nekkarcity » Sat Sep 30, 2006 9:33 pm

thanks duvien and  fotisevangelou for the head's up! Your both examples work fine with Safari!

I also found a solution for Safari (innerHtml versus DOM)
http://jszen.[URL banned].com/2006/02/safar ... rhtml.html

User avatar
DesignGuy
Joomla! Explorer
Joomla! Explorer
Posts: 263
Joined: Sat Sep 02, 2006 9:33 pm
Location: Chicago, USA
Contact:

Re: Click/pulldown navigation

Post by DesignGuy » Wed Oct 18, 2006 10:13 am

So, do we get to see the end result?
John Coonen
Host, CMS Expo Learning & Business Conference - http://CMSExpo.net
Managing Director, The CMS Connection - http://CMSConnection.com
Co-founder, JoomlaChicago

User avatar
nekkarcity
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 109
Joined: Thu Aug 18, 2005 6:07 am
Location: Tettnang - Germany
Contact:

Re: Click/pulldown navigation

Post by nekkarcity » Thu Oct 19, 2006 6:53 pm

Did you talk to me or duvien or fotisevangelou?

I got it works, but only on my Joomla! based page not on Wordpress. Both pages are XHTML strict and CSS validated! I also installed Firebug, a Firefox JavaScript debugger Extension <- no errors.
Hmm, I still don't know why one page runs and another not.

http://developer.apple.com/internet/web ... dom2i.html

User avatar
Trimud
Joomla! Intern
Joomla! Intern
Posts: 53
Joined: Fri Sep 01, 2006 9:18 am
Location: Sofia, Bulgaria
Contact:

Re: Click/pulldown navigation

Post by Trimud » Mon Oct 30, 2006 8:34 am

First of all I would like to thank for this great template. I have only one small problem - the shelf_right.jpeg picture in the pull down menu is not showing in Firefox and Opera. Any ideas how to fix this?

Thanks in advance :)
It`s cool I say!!!


Locked

Return to “Design and Accessibility - Archived”