Adobe Community: Drop Down Menu, Help Please

Currently Being Moderated

1. Ken Binney,

Aug 23, 2012 9:02 AM in reply to Hyde1216

Report

You will get much more help if you upload your files somewhere and post a link for us.

|

Mark as:

Currently Being Moderated

2. Hyde1216,

Aug 23, 2012 9:44 AM in reply to Ken Binney

Report

Alright, sorry about that, I was unsure of what the proper way would be to post some coding on here. Sometimes I'm a little too over cautious with this stuff.

http://www.filedropper.com/jqueryslidemenu2

http://www.filedropper.com/jqueryslidemenu2_1

The first file is the CSS, the second file is the JS

|

Mark as:

Currently Being Moderated

3. Nancy O.,

Aug 23, 2012 12:39 PM in reply to Hyde1216

Report

The best way to get help is to upload your page and dependant files to a web server space you control and post a link here so we can see the working page in our browsers.

Nancy O.

|

Mark as:

Currently Being Moderated

4. Hyde1216,

Aug 24, 2012 5:58 AM in reply to Nancy O.

Report

Alright, sorry about that.

http://showcasenc.com/home-builders-fayetteville.html

Here is a link to one of the pages of the site that has been updated to use all three media queries. The desktop.dss works fine, but the menu bar on the tablet.css and phone.css either don't show up or don't slide out a drop down menu when the mouse is hovered over it.

[Edit]

Well that's strange, when I tested the site out on the browser it showed up without any problems. Now that I used the Put command to place the page up on the website, the banner and side bar are missing. What causes this to show up differently then when I tested it in a browser using Dreamweaver?

[Another Edit]

Also it looks like the mainContent div area of my pages throughout the website have all been pushed down from where they are supposed to be. Would anyone be able to tell me what caused that and how I can fix it?

|

Mark as:

Currently Being Moderated

5. Ken Binney,

Aug 24, 2012 7:38 AM in reply to Hyde1216

Report

You say desktop is OK, but this is view on Firefox on desktop PC.

These are two problems (linking to your local computer)

.designbuild #subheader {

background-image: url("file:///D|/Desktop/DBwebsite/images/template_imgs/images/subheade r.jpg");

height: 33px;

left: 0;

width: 760px;

}

AND

.designbuild #mainContent {

background-color: #FFFFFF;

background-image: url("file:///D|/Desktop/DBwebsite/images/template_imgs/images/main_bkg d.jpg");

background-repeat: no-repeat;

float: right;

margin: 0;

padding: 0 15px;

text-align: left;

width: 571px;

}

|

Mark as:

Currently Being Moderated

6. Ken Binney,

Aug 24, 2012 11:05 AM in reply to Nancy O.

Report

Hi again -

After repairing your image links, you may also wish to stop the two-word menu text from wrapping

as follows

.jqueryslidemenu {

font: bold 11px Verdana;

}

To stretch your 30 years image (desktop.css)

.designbuild #subheader {

background-image: url("../images/template_imgs/images/subheader.jpg");

height: 33px;

left: 0;

width: 100%;

}

|

Mark as:

Currently Being Moderated

7. Hyde1216,

Aug 27, 2012 6:58 AM in reply to Ken Binney

Report

This is all a big help, but I'm still unsure why my menu bar for the phone and tablet queries are not sliding out a drop down menu under each button. I'm sorry it's taking me so long to respond some times, I'm just trying to upload a good example onto the internet so you all might be able to help me better, hitting a few snags here and there trying to do that.

|

Mark as:

Currently Being Moderated

8. Ken Binney,

Aug 27, 2012 8:07 AM in reply to Hyde1216

Report

Hi again -

You are still linking files to your local computer,

DW can't manage links for you unless you have defined your site in Site Manager.

For example none of these links in your media.css will work online

/* Phone */

@import url("file:///D|/Desktop/DBwebsite/templates/phone.css") only screen and (max-width:320px);

/* Tablet */

@import url("file:///D|/Desktop/DBwebsite/templates/tablet.css") only screen and (min-width:321px) and (max-width:768px);

/* Desktop */

@import url("file:///D|/Desktop/DBwebsite/templates/desktop.css") only screen and (min-width:769px);

|

Mark as:

Currently Being Moderated

9. Hyde1216,

Aug 27, 2012 9:07 AM in reply to Ken Binney

Report

Ah, I get it now, but if I'm not supposed to use links linked to my local computer, how do I link the images to the site? I thought I had defined my site in Site Manager already, but chances are I'm wrong. The Site Manager layout for CS5.5 is different from CS4.

|

Mark as:

Currently Being Moderated

10. MurraySummers,

Aug 27, 2012 9:09 AM in reply to Hyde1216

Report

The Site Manager layout for CS5.5 is different from CS4.

Not as far as your local site definition goes. Define your local site properly - by browsing to and selecting the local root folder. Then make your links in the usual way, by browsing to and selecting the target file. DW will take care of the rest.

|

Mark as:

Currently Being Moderated

11. Ken Binney,

Aug 27, 2012 9:43 AM in reply to Hyde1216

Report

Hyde1216 wrote:

but if I'm not supposed to use links linked to my local computer,

You define the root folder i.e." DBwebsite" of the site in Site Manager and then

when you go to link a file or image, DW knows how to write the link i.e images/pic.jpg

You can always manually correct anf bad links in code view

like changing

@import url("file:///D|/Desktop/DBwebsite/templates/desktop.css")

to

@import url("templates/desktop.css")

|

Mark as:

Currently Being Moderated

12. Hyde1216,

Aug 27, 2012 11:47 AM in reply to Ken Binney

Report

Awesome! Thank you for helping me fix the images on the site after upload, they seem to be coming in the way they are supposed to now.

My next problem though, now that I got the menu bar for all three queries to show up, how do I get them to slide down a drop down menu like the desktop query does?

http://showcasenc.com/home-builders-fayetteville.html

That page there should have the most updated coding. Making the browser smaller will show you tablet and phone layout.

|

Mark as:

Currently Being Moderated

13. Ken Binney,

Aug 27, 2012 12:45 PM in reply to Hyde1216

Report

You're welcome

Sorry to say I have no experience whatsoever on handhelds.

Can't imagine how to view a 780px wide horizontal menu on a phone.

Let's pray for the experts to come along with ideas.

|

Mark as:

Currently Being Moderated

14. Hyde1216,

Aug 27, 2012 12:51 PM in reply to Ken Binney

Report

That's fine, you helped me out big time already.

I'll be sure to keep checking back on this thread though, the menu is the last thing I need fixed before I can put up the update for the full site to make it mobile friendly.

|

Mark as:

Currently Being Moderated

15. Ken Binney,

Aug 27, 2012 1:07 PM in reply to Hyde1216

Report

tt's possible that the solution is to rewrite the menu CSS FORTHE NARROW devices to display vertically.

Check this one out and the various demos

http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

|

Mark as:

Currently Being Moderated

16. Hyde1216,

Aug 28, 2012 8:05 AM in reply to Ken Binney

Report

I worked with that a little, making the narrow devices display vertically only made it so that when I hovered my mouse over the menu buttons it made some space between the menu and mainContent body div. I wonder if it has anything to do with the white arrows on the menu buttons. The white arrow thumbnails show up on the menu buttons for the desktop query, but not on the phone or tablet queries. I did set the coding for them to be there, I just don't know why they aren't there.

I'll keep tinkering with it, but any help is greatly appreciated.

[EDIT]

Here are the links to the css and js files used for my desktop and phone queries for my site.

http://www.mediafire.com/?ht12z12pwwt8dcu

http://www.mediafire.com/?jir5cg997nivoa0

http://www.mediafire.com/?5ek6owxh0au9oi4

http://www.mediafire.com/?o8eodw170711ob6

The jqueryslidemenu.css and js works, but the jqueryslidemenu2.css and js does not.