PDA

View Full Version : help with drop down menu


fms
08-10-2012, 01:15 AM
Hi -

I am stuck on this, as the graphic artist who made my page "does not do drop down menus"???

My new site (in progress) http://www.financialastronomy.com/finastro/Financial%20Astronomy/index1.html#&slider1=1 - has a left hand navigation menu. The g-artist used hyperlinks for the menu, as you can see.

I need to have a drop down on 3 of the 5 hyperlinks and I would not have a clue how to do it. I am not css literate enough to make it work, as a mouseover drop down, or that the navigation menu format needs to changed to make the drop down work.

I don't want the appearance to change.

Any help, please.

fms

edbr
08-10-2012, 02:08 AM
no need to change the appearance , it looks good btw. I would put those links in navbar into a unordered list, then add navbar a hover { ...}to create a drop down. but it is a css soution. ill see if i have a simple example for you later

edbr
08-10-2012, 02:57 AM
here is a working css drop down i added comments so i hope you can work with it as a starting point,

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style> #navbar{float:left; position:relative; color:#FFF; font-size:1em; width:960px; }

#navbar ul{text-align:center; }
#navbar ul li{font-weight:bold; width:120px; height:25px;
text-decoration:none; list-style-type:none;position:relative;float:left; background-color:#3F221B; }
#navbar ul { background-color:#3F221B;}
#navbar ul ul li{background-color:#3F221B;}

#navbar a:visited {color:#FFF;}
#navbar ul ul li {width:120px; text-align:left }

/* top level */
#navbar a, #navbar a:visited {display:block;text-decoration:none;color:#fff; }

/* hide the sub levels */
#navbar ul ul {visibility:hidden; position:absolute;top:25px; background-color:#3F221B; width:120px;}

/* second level links */
#navbar ul ul a, #navbar ul ul a:visited {background-color:#3F221B; color:#fff; width:120px;}
#navbar ul ul li a:hover {background-color:#3F221B; width:120px;}

/* top level hover */
#navbar a:hover, #navbar ul ul a:hover{color:#fff; }
/* second level */
#navbar ul li:hover ul,#navbar ul a:hover ul{visibility:visible;}</style>
</head>

<div id="navbar">
<ul>
<li ><a href="#">Home</a></li>


<li > <a href="#">link2</a>

<!-- -------------- this is the drop down --------------->
<ul>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>

<!-- -------------- end of the drop down --------------->

</li>

<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li> </ul> </div> <!-- end navbar-->

<body>
</body>
</html>

fms
08-10-2012, 03:01 AM
I hope I can do it. I will send to the g-artist who did the page for a hand with it.

Thanks!

Corrosive
08-10-2012, 01:49 PM
I am stuck on this, as the graphic artist who made my page "does not do drop down menus"???


Lol, don't get a graphic designer to do a web designers job. That's like asking a bus driver to fly a plane ;)

edbr
08-11-2012, 12:53 AM
i may have given him a new template to work with :)

fms
08-11-2012, 01:23 AM
This is the reply I got back from my g-artist.

I'm not sure about this script.
It's only a small part of the entire HTML document.
To be able to get it to work i'd have to know which css elements are communicating with the html,
and also what elements need to be contained in my divs.

edbr - what does he mean?

Thanks!

edbr
08-11-2012, 02:21 AM
means he hasnt got a clue what hes doing i would say if he cant modify a simple code snippet like that

fms
08-11-2012, 02:43 AM
Oh no - good Lord!

I did not expect that reply. Geese!

I'll get back to you. Thanks!

edbr
08-11-2012, 03:12 AM
or he doesnt want to

edbr
08-11-2012, 03:23 AM
try this yourself ,10 minutes to adapt should help get him going .
<!DOCTYPE html>
<html>
<head>
<title>A technical analysis forecasting service incorporating financial astronomy</title>
<meta name="keywords" content="Techncial analysis, forex currencies, option strategies, financial astronomy, financial astrology, financial money markets, astro forecasting, astro economics, astrologers, planetary cycles, personal trading accounts, trading psychology" />
<meta name="description" content="A technical analysis forecasting service of financial futures, forex currencies, commodities, option strategies incorporating financial astronomy, financial astrology to determine price movements." />
<link href="css/movingboxes.css" media="screen" rel="stylesheet">
<!--[if lt IE 9]>
<link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<style type="text/css">
<!--

body {
background-color: black;
padding:0;
margin:0;
text-align:center;
}

a:link {color:#d0aa84;
text-decoration:none;}
a:visited {color:#d0aa84;
text-decoration:none;}
a:hover {color:#816c57;
text-decoration:underline;}
a:active {
color:#69503C;
text-decoration:none;
}

#container {
width:1024px;
height:auto;
margin: 0 auto;
text-align:left;
border-style:solid;
border-color:#666;
border-width:1px;
padding-bottom:90px;
color: #999;
text-align:center;
}

#thebody
{text-align: left; word-wrap: normal; margin: 0 10% 0 10%;
background-image:url(transp.png);
background-repeat:repeat;
color:#FFF;
padding: 10px 40px 20px 40px;
border-style:solid;
border-color:#333;
border-width:3px;
font-size:14px;
margin-top:60px;
}

#slidercontnet
{width:1024px;
height:auto;
}

#maincontent
{width:1024px;
height: auto;
background:#000;
background-image:url(background.png);
background-repeat:no-repeat;
background-position:top;
padding-top:70px;
padding-bottom:70px;
}

#header
{width: 1024px;
height: 103px;
padding:0px;
background-image:url(header.png);
}

#footer
{width:1024px;
height:20px;
text-align: center;
font-size: 12px;
line-height:17px;
}

#menu
{width: 1024px;
position:relative;
background-image:url(menubg.png);
border-style:solid;
border-color:#666;
border-width:1px;
border-right-style:none;
border-left-style:none;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
line-height: 20px;

}

.leftnav
{width: 815px;
height: 22px;
text-align:left;
float: left;
font-size:.8em;
}

.rightnav
{border-color: white; width: 200px;
height: 22px;
float: left;
text-align:right;
color: #FFF;
}

h3
{text-align: left; color:#d0aa84;
}

#slider { width: 815px; }
#slider li { width: 650px; }

h4
{color:#d0aa84;
margin-bottom: -8px;
margin-top: 14px;
}

ul
{background-image:url(sliderbg.png);
background-repeat:repeat;
}

li
{background-image:url(libg.png);
background-repeat:repeat;
}



.leftnav ul{text-align:left; }
.leftnav ul li{font-weight:bold; width:auto; margin: 0 10px;
text-decoration:none; list-style-type:none;position:relative;float:left;}


.leftnav a:visited {color:#FFF;}
.leftnav ul ul li {width:auto; }

/* top level */
.leftnav a, .leftnav a:visited {display:block;text-decoration:none;color:#fff; }

/* hide the sub levels */
.leftnav ul ul {visibility:hidden; position:absolute; width:auto; }

/* second level links */
.leftnav ul ul a, .leftnav ul ul a:visited {color:#fff; width:auto; }
.leftnav ul ul li a:hover { width:auto; }

/* top level hover */
.leftnav a:hover, .leftnav ul ul a:hover{color:#fff; }
/* second level */
.leftnav ul li:hover ul,.leftnav ul a:hover ul{visibility:visible;}


-->
</style>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="css/movingboxes.css" media="screen" rel="stylesheet">
<!--[if lt IE 9]>
<link href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->

<!-- Required script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="js/jquery.movingboxes.js"></script>


<script>
$(function(){

$('#slider').movingBoxes({
/* width and panelWidth options deprecated, but still work to keep the plugin backwards compatible
width: 500,
panelWidth: 0.5,
*/
startPanel : 1, // start with this panel
wrap : false, // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
buildNav : true, // if true, navigation links will be added
navFormatter : function(){ return "●"; } // function which returns the navigation text for each panel
});

});

</script>

<style type="text/css">
<!--
.style2 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {
color: #D0AA84;
font-weight: bold;
}
.style5 {color: #D0AA84}
.style6 {color: #FFFFFF}
.style7 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="menu">

<!-- This is the left side of the navigation -->




<div class="leftnav">
<ul>
<li ><a href="#">Mom &amp; Dad</a></li>


<li > <a href="#">Financial Astronomy</a>

<!-- -------------- this is the drop down --------------->
<ul>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
<li ><a href="#">sublink</a></li>
<li><a href="#">sublink</a></li>
</ul>

<!-- -------------- end of the drop down --------------->

</li>

<li><a href="#">Phenomenal Forcasting</a></li>
<li><a href="#">Educational</a></li>
<li><a href="#">Details</a></li> </ul> </div>

<!-- This is the right side of the navigation -->
<div class="rightnav"><a href="www.msn.com" style="color:#ffffff" title="Home">Home</a> | <a href="www.dogs.com" style="color:#ffffff" title="About">About</a> | <a href="www.cats.com" style="color:#ffffff" title="Contact">Contact</a>
</div>
</div>

<div id="maincontent">
<ul id="slider">

<!-- This is the beggining of the content in the slider -->

<li>
<img src="demo/redlight1.PNG" alt="picture" title="Picture 1">
<h4 class="style2"><span class="style5">The Reason Why</span> - when you sincerely ask</h4>
<p class="style7">will open the <span class="style5">'</span>doors of perception<span class="style5">'</span></p>
</li>

<li>
<img src="demo/3.jpg" alt="picture" title="Picture 2">
<h4 class="style2"><span class="style5">You are now</span> in front of the TV</h4>
<p class="style2"><strong> the financial news, at <span class="style5">6:25 PM</span>, streams the bottom of your screen</strong></p>
</li>
<li>
<img src="demo/4.jpg" alt="picture" title="Picture 3">
<h4>News Heading</h4>
<p>Slider one says this <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
</li>

</ul>

<!-- This is the end of the slider -->
<div id="thebody">
<!-- This is where all the content will go, use the <h3> tag for a heading -->

<p align="justify" class="style3"><span class="style4">The Reason Why</span> - YOU are standing at a traffic light at 2:44 PM on any given day is because you cannot be anywhere else, <span class="style4" body="bold">at that time</span>.</p>
<p class="style3">The person next to you and the people around you also cannot be anywhere else, <span class="style4">at that time</span>.</p>
<p align="justify" class="style3">It appears to be a random arrangement to the human way of thinking at that traffic light. It appears to be coincidental where people are standing at that light - <span class="style4">but it is not</span>. </p>
<p align="justify" class="style3 style5"><span class="style6">When you</span> <strong><span class="style6">'</span>consciously<span class="style6">'</span> </strong><span class="style6">realize that</span> <span class="style6">about 2:44 PM, or any</span><strong><span class="style6"> <span class="style5">time</span> </span></strong><span class="style6">on any given day</span><strong> certain doors </strong><span class="style6">of</span><strong> perception </strong><span class="style6">and</span><strong> understanding </strong><span class="style6">open to</span><strong> another level </strong><span class="style6">of</span><strong> thought.</strong></p>
<p align="justify" class="style3 style5"> <span class="style6">This <span class="style4">certain place</span> - <span class="style4" body="bold">certain time</span> premiss does not mean that human life thought processes have an</span> <span class="style6"><strong>absolutely fixed pre-determined </strong>future path to follow. But, <strong>predetermined</strong> none-the-less. </span></p>
<p align="justify" class="style3 style5"> <span class="style6">This</span> <strong>certain place</strong> <span class="style6">-</span> <strong>certain time</strong> <span class="style6">premise means that specific functions of our known universe, that we are</span> <strong>collectively</strong> <span class="style6">connected to,</span> <strong><span class="style6">needs to be at a</span> certain place, </strong><span class="style6">at a</span><strong> certain time </strong> <span class="style6">- not all the time being a <strong>mutable</strong> structure, but at certain times being a <strong>fixed</strong> structure. </span></p>
<p align="justify" class="style3 style5"> <span class="style6">The</span> <strong>concept of time </strong> <span class="style6">seems to exist to also allow the 'deliberate creative' forces to <strong>adjust </strong> 'their' creation plan, as life plays itself out at a specific</span> <strong>frequency-of-time </strong> <span class="style6">rate</span>.</p>
</div>
</div>


<span class="style5">
<!-- This section contains the links at the bottom of the webpage -->
</span>
<div id="footer"><a href="jfhgsfd" title="Mom & Dad">Mom &amp; Dad</a> | <a href="asdgds" title="Financial Astronomy">Financial Astronomy</a> | <a href="sdfsdfsd" title="Phenomenal Forcasting">Phenomenal Forcasting</a> | <a href="fsdsdf" title="Educational">Educational</a> |<a href="sfdsfd" title="Details"> Details</a><br>
<a href="jfhgsfd" title="Title 1">Second Level Link</a> | <a href="asdgds" title="Title 2">Another Second Level Link</a> | <a href="sdfsdfsd" title="Title 3">Link Number Three</a> | <a href="fsdsdf" title="Title 4">Link Four</a> |<a href="sfdsfd" title="Title 5"> Last Placeholder Link</a> <br>
<br>
<p>Copyright &copy; 2012 Mike Griffith Design</p></div></div>

</body>
</html>

fms
08-11-2012, 03:27 AM
11:30 PM here EST-US.

I'll sleep on all this.

fms
08-11-2012, 03:34 AM
Just got your "try this" reply.

I'll attempt tomorrow. To tired now. I would rather deal with it fresh.

fms
08-11-2012, 03:50 AM
Couldn't go to bed without giving it a try. That' what I want. I thought drop downs were a simple thing. He told me a while back that he does not use them.

The navigation bar is missing on yours. I'm sure he can deal with that.
http://www.financialastronomy.com/finastro/Financial%20Astronomy/index3.html#&slider1=2

Here's the original page with the nav-bar.
http://www.financialastronomy.com/finastro/Financial%20Astronomy/index1.html#&slider1=2

bed time!

Corrosive
08-11-2012, 08:25 AM
You might wanna whack a z-index property on the dropdowns because they disappear behind some of the content at the moment. Otherwise, looks good :)

fms
08-11-2012, 11:16 AM
OK corrosive -

I'll send it all to my GA this morning.

randy.t
08-20-2012, 06:16 AM
I have had a lot of issues getting drop down menus to work in dreamweaver. Every time I think I am close I run into a browsers issues. I found this dreamweaver menu extension (http://cssmenumaker.com/dreamweaver-css-menu-extension) that has a full library of CSS drop down menus an it works well with dreamweaver.

fms
08-20-2012, 10:23 PM
I have DW MX 2004. I emailed the software people and they have no gotten back to me, yet. I will most likely have to upgrade.

My G-Artist is attempting and he has not gotten back to me in 12 days now???!!!???

Thanks for the info!

edbr
08-21-2012, 02:58 AM
My G-Artist is attempting and he has not gotten back to me in 12 days now???!!!???
get a web designer then.

fms
08-21-2012, 03:09 AM
Is there a way to send a private email to explain a few things about my GA to those who posted, so far.

my email is - star[at]financialastronomy[dot]com, or youemailme[at]verizon[dot]net.

Thanks!

gentleone
08-21-2012, 12:28 PM
...explain a few things about my GA...
What do you want to hear more about him? I mean, it's pretty obvious he's incompetent when it comes to coding. Which is okay, but then he should have never taken this job.

There are even debates floating around the web discussing if a web designer should know the basics of HTML & CSS, because a web designer is also only working in PS or Illustrator to design the mock-up, but has (actually should have) knowledge about user experience, usability, typography, white space, grids, etc. Ingredients that are necessary to create effective websites. Normally he would hand over his final PSD or AI file to a web developer to build it.

But then there are people who do both (job title: web designer/developer). They know the design principles and they know how the web works.

If your GA did not get back to you after 12 days, I'd recommend to start looking for someone else that can finish your website.

fms
08-21-2012, 05:54 PM
He's a relative, so I am hanging in there with a family member. It's a slightly awkward situation and I don't want to upset the apple cart since he is alsmost done with the site.

edbr
08-22-2012, 01:15 AM
buy him a course on html and css for his birthday perhaps then.

edbr
08-22-2012, 01:24 AM
@randy.t. as you have stated the extension as your home page , you are obviously here to promote your product. you almost garnered an infraction posting a link to a post about spry menus. if you are just here to promote your product you are running the risk of being seen as a spammer.
If someone wants help on drop down menus they would be served better by a simple search on the web. There are many free resourses before relying on a 29$ extension IMO