Dropdown menu "stuck"

Report · Jan 24, 2017

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>

Report · Jan 24, 2017

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

Report · Jan 24, 2017

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 & Moderator

Report · Jan 24, 2017

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.

Report · Jan 24, 2017

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.

Report · Jan 24, 2017

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.

Report · Jan 24, 2017

Don't even think about navigation before the following -

This maybe old fashioned, but I always start with a sketch of how I want my layouts to look , (I actually use the physical measurements of a smartphone and tablet in inches) no content just layout.

No matter what you do you will have to learn html and css, as media-queries will be required, and there are two possible solutions the one I recommend, is called css flexbox layout, and is what most people are now moving towards at the moment.

Reading and using is probably the best way to learn about modern rwd, (rwd = responsive web design) and a good place to start would be -

https://www.amazon.co.uk/Responsive-Web-Design-HTML5-CSS3-ebook/dp/B0114P1L2A/ref=sr_1_1?s=books&ie=...

There are many other books out there and lots of free tutorials, but in my opinion a good starting reference book is essential.

I am sure Nancy will recommend Bootstrap, which may also be a good place to start, and I will leave recommendations for learning and using for her to post.

Report · Jan 24, 2017

If you're in web design for career reasons, learn CSS Flexbox and everything you can about HTML5, CSS3, JavaScript and later server-side programming like PHP.

If you're not a career web designer and just need something that works without too much pain, look at a responsive framework like Bootstrap. There are others you can use too but Bootstrap is already integrated into DW.

Go to File > New > Starter Templates > Bootstrap Templates.

Pick one and hit Create button.

Save & name it in your local site folder.

Review Bootstrap tutorials below for details.

Bootstrap 3 Tutorial

Bootstrap CC tutorials

https://helpx.adobe.com/dreamweaver/how-to/make-style-web-page.html

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 24, 2017

Designing for print is easy. Designing for a flexible medium like the web is not as easy. But it can be done with advanced coding skills and a creative use of background colors.

I like to design a basic comp in PS or AI and then translate that concept to working code (HTML & CSS) knowing full well that I may need to compromise a little on my design to make it work as a web site. Some designers are willing to compromise and others are not. Thus responsive web design is not for everyone.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 25, 2017

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/

Report · Jan 25, 2017

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!

Dropdown menu "stuck"

1 Correct answer