PDA

View Full Version : Drop down menu from an image


camy252
09-04-2012, 09:14 PM
Hey there,

I have created a website using the photoshop to dreamweaver splice technique and it all looks great. But my client wants a drop down menu for one of the nav bar options.

How/can I created a drop down menu from one of these links?

Because I imported elements from photoshop the target I would like for the drop down is an image.

I looked into the spry options but they seem to only be for creating new navigation bars from a simple design. There is no way im starting my navigation bar again from scratch just to have a drop down menu on one of my nav options!

Is there another way to achieve this?

I have a image background repeat problem aswell if anyone feels generous with their wisdom!

Any advice would be appreciated


Dreamweaver CS4
Fairly novice user

johnMoss
09-05-2012, 06:52 AM
You're in luck... I have a site under construction utilizing a menu bar thats tailor made for what you're needing to do. Examine the contact menu option. Its a drop down. In this case all you have to do is remove the form content & icons and simply slap in your picture. Resize & recolor etc. you're good to go...
www.yontif.com (http://www.yontif.com)
What's your BG problem?

Corrosive
09-05-2012, 08:34 AM
Looks like John's should work nicely but you can also use this as a good resource for alternatives; http://webdesignledger.com/resources/14-easy-to-implement-drop-down-menu-solutions

camy252
09-05-2012, 10:13 AM
thanks for quick replies guys.

JohnMoss, had a look on your site and your drop down menus are perfect for what im looking for. However its not a picture im looking to have for the drop down, more like I have an image file instead of a navbar option. So I would be looking to have something like your 'support' drop down menu, except mine would have 7 options.
I have looked at the coding for that section and im afraid its a little out of my level of expertease.

Which (code)section should i copy onto my page to get that to work with the image file? And where would I apply it into my page?

My background problem is a little annoying, basically I have a bground image set on my pages and one of my pages has alot of content so the page stretches down. I have told CSS to repeat image downwards and it works in the dreamweaver design page but when i preview in browser it doesnt work. not the worst thing in the world but looks a bit rubbish! I feel im missing something. I have checked root folder for the original image and its there no probs.

camy252
09-05-2012, 10:16 AM
This is the current code for the navbar option I would like to have the drop down menu for, hope this helps:

<td colspan="2"><a href="../event.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('event','','../content/images/event_link_ro.jpg',1)"><img src="../content/images/event_link.jpg" name="event" width="96" height="22" border="0"></a></td>
<td rowspan="2">

johnMoss
09-05-2012, 02:39 PM
The menu bar is a simple piece of JQuery. I'm happy to send you the files but you need to get a bit of a grasp on what you are doing in order to tinker with it. In truth it's quite simple. Corrosive's lead on a resource page is what you really need to do first; there you will get a tutorial on the why's & wherefore's. Either use one of theirs or write back & I'll send you the scripts.
Do you have a link for your background issue, i.e. is it up somewhere we can see it?

camy252
09-05-2012, 03:38 PM
yeah had a look at the jq stuff, again that seems to apply if you are building navbar from nothing. As i already have a navbar i dont think it would be suitable.

Just spent 5 hours in flash creating a drop down menu that never ended up working so i have decided to get annoyed and give up. It looks like the spry technique would be recommended in the future but for now I will have page links within the main page. The flash technique looked good but I suck at AS so will probably tackle it when im in a better mood.

Appreciate the help guys, apparently its a popular problem according to my google searches!

camy252
09-06-2012, 01:24 AM
Do you have a link for your background issue, i.e. is it up somewhere we can see it?

Hey JohnMoss
I am in the process of putting the site online as the background problem isnt a major issue. Its just a tad annoying as I thought setting the background image to repeat would work. Specially as it works in the Dreamweaver stage.

johnMoss
09-06-2012, 02:48 AM
K... It'll be an easy fix I'm sure... Keep the faith bro, gotta start somewhere... There are a gazillion ready to wear menus out there, you don't necessarily have to start from scratch. Avoiding flash is almost an imperative, remember, they won't work on I-Phones...

camy252
09-18-2012, 09:21 PM
Back to my original problem:

My site is now up and running and I hope this gives a better idea of what I am trying to achieve with the drop down menu. Looking to have it come down from 'Your Events'.

camy252
09-18-2012, 09:22 PM
http://www.stravaigceilidhs.com

johnMoss
09-18-2012, 11:30 PM
site link there Cams? :)

camy252
09-19-2012, 10:04 AM
Should be there above your post. Forgot to put it in last post!

http://www.stravaigceilidhs.com

johnMoss
09-19-2012, 03:01 PM
I have never used tables to build anything but forms so I'm no expert with them, but this ought to do the trick. Whats happening is you're adding a component and then hiding it until hovered. I assume also that what you are trying to do is take that list of elements on the events page and add them to your menu right? So here ya go:

The <td> holding the event link: give it an id of "dropdown".

Next add an UL inside the td tag
<td class="dropdown">
<a>Events</a>

<ul>
<li>wedding</li>
<li>brithday</li>
<li>etc...</li>
</ul>

</td>

/* CSS /*
.dropdown ul {display:none}
.dropdown:hover ul {display:block;}

Use relative positioning & some more css to get these links positioned just the way you want.

camy252
09-20-2012, 02:11 PM
Add the UL within this code?

<td colspan="2"><a href="../event.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('event','','../content/images/event_link_ro.jpg',1)"><img src="../content/images/event_link.jpg" name="event" width="96" height="22" border="0"></a></td>

Anywhere in there be fine?

johnMoss
09-20-2012, 02:37 PM
No, not just anywhere. Your first entry <td colspan="2" id ="dropdown">.
Then right before your closing tag add the rest. Remember you will have to play with the css to get it positioned the way you want it. in addition to the above tags for dropdown, you'll set width, height, background color, etc... as so:


#dropdown ul{
width: choose a width px
height: choose a height px
text-align: left
color: choose
Background-color: choose
position:relative;
margin: play with to set position of box
padding:play with to set text inside box
}

camy252
09-20-2012, 03:27 PM
Okay. Tried all of the above and made a pretty spectacular mess of my site! lol This is the code. Tried changing the CSS rules to fix layout mess but they didnt make a difference.

<td colspan="2" id ="dropdown"<td class="dropdown">
<a>Events</a>

<ul>
<li>wedding</li>
<li>brithday</li>
<li>etc...</li>
</ul>

/* CSS /*
.dropdown ul {display:none}
.dropdown:hover ul {display:block;}

#dropdown ul{
width: choose a width px
height: choose a height px
text-align: left
color: choose
Background-color: choose
position:relative;
margin: play with to set position of box
padding:play with to set text inside box
}

I appreciate your patience John, Im afraid im just not that experienced with coding.

johnMoss
09-20-2012, 04:24 PM
No worries, gotta start somewhere right? :)

This:
<td colspan="2" id ="dropdown"<td class="dropdown">


is not this:
<td colspan="2" id ="dropdown">, so
1) close that tag as shown.
2) my bad, I have you doing declarations on the id.
In the css above, change the # to a . to make it a class declaration.
3) take all this and insert just before your closing </td> tag.
<td class="dropdown">
< a>Events</a>

< ul>
< li>wedding</li>
< li>brithday</li>
< li>etc...</li>
< /ul>


My apologies on the confusion...

Allin44
09-21-2012, 11:44 PM
This is something I've had to do in the past, but I've forgotten entirely how to create a drop down menu, so this thread was a nice refresher course for me. Thanks all.

John, you've been a great help to me, as well. Thank you!

Not sure if this is exactly what you're looking for or not camy, but this Dreamweaver Menu Extension might be of some help. Let me know!

http://cssmenumaker.com/dreamweaver-css-menu-extension

johnMoss
09-22-2012, 12:11 AM
This is something I've had to do in the past, but I've forgotten entirely how to create a drop down menu, so this thread was a nice refresher course for me. Thanks all.

John, you've been a great help to me, as well. Thank you!


Happy to be of help... Welcome to the forum :)

Allin44
09-22-2012, 01:42 AM
Happy to be of help... Welcome to the forum :)

Thanks! :D

camy252
10-17-2012, 01:08 PM
Sorry for being a total noob again but I have been slaving away at this the past few weeks to no avail. Have tried inserting those amendments you suggested and still no drop down and layouts are messed up again.
Here is my code

<td colspan="2" id ="dropdown"><a href="../event.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('event','','../content/images/event_link_ro.jpg',1)"><img src="../content/images/event_link.jpg" name="event" width="96" height="22" border="0"></a><td class="dropdown">
< a>Events</a>

< ul>
< li>wedding</li>
< li>brithday</li>
< li>etc...</li>
< /ul> </td>

/* CSS /*
.dropdown ul {display:none}
.dropdown:hover ul {display:block;}

.dropdown ul{
width: choose a width px
height: choose a height px
text-align: left
color: choose
Background-color: choose
position:relative;
margin: play with to set position of box
padding: play with to set text inside box
}

domedia
10-17-2012, 02:28 PM
1. You cannot have a TD inside a TD
2. You're mixing ID's and classes. It's not a good idea to have on of both, where both is called 'dropdown'. I think it ads to your confusion.
3. Actually, this is probably do to not knowing HTML, so you should start there first.