PDA

View Full Version : Nav bar without using Spry


gonenative
06-19-2015, 12:02 AM
I made a navigation bar as a library item in DW. It is working fine, but now I have to add several dropdown bars to it, and am at a loss.

Code so far on this Library item is:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="all">
<table width="875" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="6" align="center" valign="bottom" bgcolor="#ffffff" class="whiteheader"><a href="/index.html" target="_blank" class="bodyruby"></a><a href="../foundersplus.html" target="_blank" class="bodyruby"></a><a href="../whyeldercommons.html" target="_blank" class="bodyruby"></a><a href="../FAQ.html" target="_blank" class="bodyruby"></a><a href="../contact.html" target="_blank" class="bodyruby"></a><img src="../images/nav horiz.png" width="875" height="5"><a href="/blog.html" target="_blank" class="bodyruby"></a></td>
</tr>
<tr>

I have been using DW for a long time, but I don't know how to do this. I've searched "The Misssing Manual" and have been all over the web but I don't see anything without using Spry.

Running DW CS5.5 on Mac OS X (Version 10.10.3) Yosemite on an iMac.

edbr
06-19-2015, 12:45 AM
hi, first i would use an unordered list to create a menu.

here's a coded a very simple working css menu with a demo to get you on the road
http://codepen.io/philhoyt/pen/ujHzd

gonenative
06-19-2015, 04:36 PM
edbr -

This looks as if it should work for me. However, when I enter the html into the Code view side of Dreamweaver, the Design window shows a vertical list with the values as given, but does not show a horizontal toolbar as it is supposed to be seen.

What did I miss?

gonenative
06-19-2015, 07:57 PM
I did try that link you sent, and customized it for my navbar. It looks as if it should work, but I don't understand why it does not show an image of the page as we usually have on the Design side of DW. Please tell me what is the next step? Remember, this is a Library item, maybe that's part of the problem?

The navbar is supposed to run horizontally. The items are: "Home" with no sub items, "Why Elder Commons" (with sub items "Why North Carolina" and "7 Steps?"), "Cohousing" (with sub items ""6 Defining Characteristics". "Why Senior Cohousing?" and "Is cohousing for you?"), then "FAQ" (with sub items "Founders", "Design and Comstruction" and "Resources"), then "Contact us" with no sub items, and "Blog" with no sub items. Text in the main blocks is red; text in the sub item blocks is green. This is the customized code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../CSS/bodyruby.css" rel="stylesheet" type="text/css" media="all">
<link href="../CSS/bodyemerald.css" rel="stylesheet" type="text/css" media="all">
<p>&lt;h1&gt;Simple Pure CSS Drop Down Menu&lt;/h1&gt;<br>
&lt;nav id=&quot;primary_nav_wrap&quot;&gt;<br>
&lt;ul&gt;<br>
&lt;li class=&quot;current-menu-item&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby">Home</span>&lt;/a&gt;&lt;/li&gt;<br>
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby">

<a href="../index.html" target="_blank" class="bodyruby">Home</a></span>&lt;/a&gt;<br>
&lt;ul&gt;<br>
&lt;/li&gt;<br>
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby">

<a href="../whyeldercommons.html" target="_blank" class="bodyruby">Why Elder Commons</a></span>&lt;/a&gt;<br>
&lt;ul&gt;<br>
&lt;li class=&quot;dir&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../whync.html" target="_blank" class="bodyemerald">Why North Carolina?</a></span>&lt;/a&gt;<br>
&lt;li class=&quot;dir&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../7 steps.html" target="_blank" class="bodyemerald">7 Steps?</a></span>&lt;/a&gt;</p>
<p><br>
<br>
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby">

<a href="../cohousing.html" target="_blank" class="bodyruby">Cohousing</a></span>&lt;/a&gt;<br>
&lt;ul&gt;<br>

&lt;li class=&quot;dir&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../6 defining.html" target="_blank" class="bodyemerald">6 Defining Characteristics</a></span>&lt;/a&gt;&lt;/li&gt;<br>
</p>

<p>&lt;li class=&quot;dir&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../whyseniorcohousing.html" target="_blank" class="bodyemerald">Why Senior Cohousing?</a></span>&lt;/a&gt;</p>
<p>&lt;li class=&quot;dir&quot;&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../goodnessoffit.html" target="_blank" class="bodyemerald">Is cohousing for you?</a></span>&lt;/a&gt;<br>
&lt;ul&gt;</p>
<p><br>
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby">

<a href="../FAQ.html" target="_blank" class="bodyruby">FAQ</a></span>&lt;/a&gt;<br>

&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald"><a href="../foundersplus.html" target="_blank" class="bodyemerald">Founders</a></span>&lt;/a&gt;&lt;/li&gt;<br>
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyemerald">

<a href="../ecschedule.html" target="_blank" class="bodyemerald">Design &amp; Construction</a></span>&lt;/a&gt;&lt;/li&gt;</p>

<p>&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby"><a href="../contact.html" target="_blank" class="bodyruby">Contact us</a></span>&lt;/a&gt;</p>

<p>&lt;li&gt;&lt;a href=&quot;#&quot;&gt;<span class="bodyruby"><a href="../blog.html" target="_blank" class="bodyruby">Blog</a></span>&lt;/a&gt;<br>
&lt;/ul&gt;<br>
&lt;/nav&gt;</p>

edbr
06-20-2015, 12:54 AM
its the characters encoded such as &lt;/a&gt;i would say. you need to convert them. maybe this happens when pasting in design view instead of code view. not too sure

heres the example working on a page

<html>
<head>
<style>
#primary_nav_wrap
{
margin-top:15px
}

#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}

#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}

#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#primary_nav_wrap ul ul li
{
float:none;
width:200px
}

#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

#primary_nav_wrap ul li:hover > ul
{
display:block
}


</style>
</head>
<body>

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li class="dir"><a href="#">Sub Menu 1</a></li>
<li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body></html>]

edbr
06-20-2015, 01:41 AM
ok when i converted it , (using notepad++ BTW) isee the cause is because you have put breaks and paragraph tags through your list. that throws the whole thing taps up.

here try this<html>
<head>
<style>
#primary_nav_wrap
{
margin-top:15px
}

#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}

#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}

#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

#primary_nav_wrap ul ul li
{
float:none;
width:200px
}

#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

#primary_nav_wrap ul li:hover > ul
{
display:block
}


</style>
</head>
<body>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../CSS/bodyruby.css" rel="stylesheet" type="text/css" media="all">
<link href="../CSS/bodyemerald.css" rel="stylesheet" type="text/css" media="all">
<p><h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#"><span class="bodyruby">Home</span></a></li>
<li><a href="#"><span class="bodyruby">

<a href="../index.html" target="_blank" class="bodyruby">Home</a></span></a>
<ul>
</li>
<li><a href="#"><span class="bodyruby">

<a href="../whyeldercommons.html" target="_blank" class="bodyruby">Why Elder Commons</a></span></a>
<ul>
<li ><a href="#"><span class="bodyemerald"><a href="../whync.html" target="_blank" class="bodyemerald">Why North Carolina?</a></span></a>
<li><a href="#"><span class="bodyemerald"><a href="../7 steps.html" target="_blank" class="bodyemerald">7 Steps?</a></span></a>

<li><a href="#"><span class="bodyruby">

<a href="../cohousing.html" target="_blank" class="bodyruby">Cohousing</a></span></a>
<ul>
<li class="dir"><a href="#"><span class="bodyemerald"><a href="../6 defining.html" target="_blank" class="bodyemerald">6 Defining Characteristics</a></span></a></li>


<li><a href="#"><span class="bodyemerald"><a href="../whyseniorcohousing.html" target="_blank" class="bodyemerald">Why Senior Cohousing?</a></span></a>
<li ><a href="#"><span class="bodyemerald"><a href="../goodnessoffit.html" target="_blank" class="bodyemerald">Is cohousing for you?</a></span></a>
<ul>

<li><a href="#"><span class="bodyruby">

<a href="../FAQ.html" target="_blank" class="bodyruby">FAQ</a></span></a>

<li><a href="#"><span class="bodyemerald"><a href="../foundersplus.html" target="_blank" class="bodyemerald">Founders</a></span></a></li>
<li><a href="#"><span class="bodyemerald">
<a href="../ecschedule.html" target="_blank" class="bodyemerald">Design & Construction</a></span></a></li>
<li><a href="#"><span class="bodyruby"><a href="../contact.html" target="_blank" class="bodyruby">Contact us</a></span></a>

<li><a href="#"><span class="bodyruby"><a href="../blog.html" target="_blank" class="bodyruby">Blog</a></span></a>
</ul>
</nav
</body></html>