Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


 

Please wait - we are now uploading and converting your file...

 

Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Menus without writing code!

Menus Without Writing Code

That's right, you can now have psd2css Online generate drop down and fly out menus for you quickly and easily without writing a single line of code.

Use the '_menu' Layer Naming Convention in conjunction with the '_link' or '_linkover' conventions and instantly you have a menu. You can have more than one on the same page. You can even have nested levels or submenus. It's all up to what you decide to draw in Photoshop.

For example, suppose you have a layer in your .psd file that you've named 'products_link'. You have designed that layer to look like a button your users will click to view your product line. But now you would like a menu to open that shows the various categories of product that you offer. So you simply design in photoshop exactly what you want the menu to look like, and where on the page it will show up. Then name the outermost or containing layer 'products_menu'. That's it. Your done. Really.

Here are some examples:
http://psd2cssonline.com/tutorials/menu3/index.html

http://psd2cssonline.com/tutorials/menu/index.html
http://psd2cssonline.com/tutorials/menu/T2.psd

http://psd2cssonline.com/tutorials/menu2/index.html

drop down menu

is there a way to get the menu to actually drop down and not come from a corner. Like drop straight down instead of fly out of a corner and appear as if it dropped down?

Drop down text

So how would I be able to have the menu texts drop down slowly from a bar and then hover there near the center of my page under the bar? Is that possible? If so would you be so kind as to explain? :) I am in a bad situation had to fire the web designer recently now trying to rush to learn this coding/web-design etc. (which my Dad used to nag on me to learn web design as a kid but I never did) So now out of desperation and curiosity I am starting to get the hang of it and with your method I hope to ease the mind numbing pain of coding alil ;) Hope you can help Thanks! -LD86

Buttons moving

Hi Shaun,

everything you do is great and it's helping me alot.
I got a question though. I made a custom menu for my wordpress website it works just fine the only thing is when I add something else to the right sidebar the buttons move to the top. I can't seem to fix that, could you please help me with this one?

Thanx!

Joomla

I saw in the tutorial that these work with Joomla, my question is, do they connection to dynamic links contain in Joomla or do they create static links?

-=Daniel=-

How to keep the clicked _hover-Button active after click?

Hey there,

After click the Layer (for example) "example_link" the Page is loading example.html - okay thats nice - but then after loading the page all Menu-Buttons are Normal links and the clicked link arent active (hover).

- How to keep the clicked _hover-Button active after click? -

dynamic menus with image gallery?

Was wondering if there was a way to place the image gallery thumbs into a dynamic menu?

Tam

Bravo

It's amaizing how easy can ripp of that css coding and other scripts with psd2css ...All i need to know is Photoshop , the hard stuff is made by this soft...you know i never see something more easy and more efficient like this.Bye-bye coding [i never was a good css or html coder]. Great job man and a wonderful thing ...IT'S FREE .
Bravo.

Drop down hover on a _text layer?

Is it possible to make a drop down menu on a _text layer? Also, I need the drop down menu to engage with a mouse rollover and not with an OnClick behavior. Thanks

Drop down hover on a _text layer?

Cheers to you Shaun! This is fantastic! This would be a great addition. A mouseover of a link or menu that listed other links, such as a "Catagory" and inside of that Catagory would list multiple links.I would want to mouse over "Catagories, then a menu of links would appear and I would click on the link I needed. If its here as an example I have not seen it yet.

other menus not working

Hey, wonderful tutorial, im working on a page right now and I added a couple of menus like the one you created, and placed them inside each of the buttons layer folder, and only the last one work, meaning the one before the background layer. Please let me know if im doing something wrong, and if there is a way to make the menu stay open for more than 4 seconds. Thank you.

Hi Daniel - I'm not certain

Hi Daniel -

I'm not certain exactly what your describing regarding the 'buttons layer folder' - I'll note that psd2css Online ignores the actual folders - it's just the order that the layers show up in the list (with all folders expanded - like there weren't any folders). If you could post a link to the PSD or just email it to me we'll figure out what's going on there.

As far as the 4 seconds goes, look for this section of code in the generated HTML file:
<code>
// Remove the following 2 lines if you don't want this menu to dissappear
// automatically. Change how long the menu stays visible by changing
// the 4000 to another number of milliseconds
clearTimeout( timerId );
timerId = setTimeout( '$("#Layer-10").hide("slow")', 4000 );
</code>

You can remove the 'clearTimeout...' and 'timerId =' lines to get rid of the 4 second thing.

Thanks.

--
Shaun
shaun@psd2cssonline.com

i cant seem to find the

i cant seem to find the

clearTimeout( timerId );
timerId = setTimeout( '$("#Layer-10").hide("slow")', 4000 );
</code>

when a open my index page with notepad to look at the html anyone poiont me the right way please

i cant seem to find the

in note pad click on edit and select find...type in the text you are looking for and hit find. If its in the html it will highlight it.

Close Menus

This is an awesome addition.

How do I make the menu close without making someone opening a new menu or navigate to a new page, like your "close flyout" link in your second example?

Thanks. I wrote up an

Thanks. I wrote up an answer for you <a href="http://psd2cssonline.com/node/55">here.</a>

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content