Participant

Answered

Dropdown menu "stuck"

Forum|Forum|9 years ago
January 24, 2017
4 replies
1585 views

Hi guys!, First off- I'm new to the forums, and much of my coding experience is self taught so my terminology may be off. I've had Adobe suite on and off through college and now I'm using it for work. I'm working on a drop-down menu for the front page of my company's new website. I have built drop-down menus before (using Dreamweaver's "drop-down button" feature), but since I need this drop down menu to be image based, I've built it using some of my own code/Dreamweaver's drop down content feature.

The short of what is going on- is that my drop-down menu acts like it is "stuck". My coworker and I have both tried to fix this to no avail, and we need it working ASAP. I built the menu in a separate document, then used Illustrator's "Save for Web" feature to copy its' code- which I then pasted in the "Drop down content" div. The menu appeared, and just stays there. When you open the document, it is just "there."

I'm a bit of a visual person, so forgive me if my wording is off!

--I'll paste my code below! (My image links will be broken, I know. Thanks for any help!)--

<!doctype html>

<html>

<head>

<title>Albion Front Page Redesign222</title>

<style>.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown:hover .dropdown-content {

display: block;

}

.desc {

padding: 15px;

text-align: center;

}

</style>

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p=new Image; d.MM_p[j++].src=a;}}

}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d)&&d.all) x=d.all; for (i=0;!x&&i<d.forms.length;i++) x=d.forms;

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

</script>

</head>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div style="position:absolute; left:1896px; top:174px; width:1336px; height:1986px; z-index: -1

" title=""><img src="AlbionFrontPageRollyUnrolled_10.gif" width="1336" height="1986" alt=""/>

</div>

</body>

</html>

Create menus in Dreamweaver

This topic has been closed for replies.

Correct answer pziecina

Glad to hear it is working.

Yes, you could do that using only css, including the 'Banner' end to the drop-down. The first question that you should ask yourself though is - "Can the site be made responsive". If not then it will be time to learn modern html and css, as without this knowledge one will struggle to produce a coherent site layout.

Responsive web site design and development means learning a completely new set of skills, that build on and expand what was required for developing a site that is purely for desktops.

B

BaldbeardianAuthor

Participant

Thanks pziecina & Nancy OShea!, the resources you've given me are proving helpful. Truly appreciated

I have a print design background with some lose knowledge of HTML, so coding isn't my forte for sure... Though I am finding it to be a fun and fascinating experience. But before I deviate too far from the subject, let me say again, thank you!

pziecina

Legend

For someone with a deign background, you may want to look into using Adobe XD to help with the layout for a rwd -

https://blogs.adobe.com/creativecloud/collaborative-design-with-adobe-xd/

Nancy OShea

Community Expert

This is a truly unfortunate navigation menu for many reasons.

It's not responsive.
It's not touch screen friendly.
It can't be re-scaled.
It's not search engine friendly.
It's not visible to Google Translate, etc...
Its not simple to update.
It contains too many inline styles.
It doesn't work.

Ditch the current menu. The prevailing trend in modern web design is to keep menus as simple as possible. Complex drop-downs don't work well on mobile devices. I would stick with a text based menu styled minimally with CSS code.

Nancy

Nancy O'Shea— Product User & Community Expert

B

BaldbeardianAuthor

Participant

I managed to get it working in the time between when I first posted and now. Unfortunately I did not return in time to see the warnings.

However, it does work now. It just needs links. The website I am working on was originally built long before cell phones were a thing. Anyhow- here is a screen shot of my design. Don't mind the censorship lol

Can I make my interface look like this with using only CSS? I'm more of a design guy than a code monkey. The only web designing I have ever done has been specifically geared towards art rather than E-commerce. Basically, I need my menu to look like a medieval banner hanging down from my rollover button...Essentially exactly as it is depicted.

B

BaldbeardianAuthor

Participant

Glad to hear it is working.

Yes, you could do that using only css, including the 'Banner' end to the drop-down. The first question that you should ask yourself though is - "Can the site be made responsive". If not then it will be time to learn modern html and css, as without this knowledge one will struggle to produce a coherent site layout.

Responsive web site design and development means learning a completely new set of skills, that build on and expand what was required for developing a site that is purely for desktops.

The current site is definitely not responsive. How can I make my redesign responsive? I am working on trying to make it easier to navigate by condensing information and making our products easier to find. I am near completion of the first page using my current methods. I am not opposed to making changes where need be.

pziecina

Legend

Unfortunately as you have found out, using a graphics program to do anything for a web page is not the way to go.

Even if one was to get this working, it would not be worth while as it would not work on mobile devices.

The reliable and recommended method is demoed here -

http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/

Another alternative would be to purchase a menu-maker from PVII -

http://www.projectseven.com/products/menusystems/index.htm

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded