PDA

View Full Version : collapsible panels - adding more than one list item?


benjamin_wooten
02-04-2017, 09:15 PM
Hi! I know this is an awfully silly question, but it has been over ten years since I have used Dreamweaver to build a website.

I am doing an extremely simple sidebar with a couple of spry collapsible panels. At least one of these panels ("PROJECTS") is meant to include a vertical list of the various projects by name, so that you can click on the heading, then scroll down the list of project names, and click on one of those/link to the page for that project.

Every time I make a collapsible panel, I can only have one line of text underneath it.

How do I add more under that? And can they be turned into individual links?

Thanks all for the help!

edbr
02-04-2017, 11:28 PM
if its just a drop down it can be achieved without using javascript. spry is a bit dead . if you want code i can oblige tomorrow

benjamin_wooten
02-05-2017, 01:29 AM
Thanks very much for the response! I am able to do the list under a single menu by using page breaks to separate the names of the projects.

I would certainly be interested in seeing your code, too, if it is handy? No need to go out of your way otherwise.

Thanks again!

edbr
02-05-2017, 05:47 AM
ok i will post qhen im at a desktop tomorrow

edbr
02-06-2017, 01:54 AM
ok a very simple sidebar deop down i hashed together for my snippets, its st to display active category based on body id.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>menu</title>
<style>

ul{ list-style:none;
position:relative; float:left; margin:0; padding:0}
ul li { clear:both;}

ul a{ display:block; color:#333; text-decoration:none;
line-height:32px; padding:0 15px;}

ul li{ position:relative; float:left; margin:0; padding:0; clear:both}

ul li a:link{ background:#f6f6f6}

ul ul{ display:none; position: relative ; left:0; background:#fff; clear:both;
padding:0}

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

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

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

ul li:hover > ul{ display:block}

<!--The hilite code-->
body.home ul li a:link.home,
body.about ul li a:link.about,
body.services u l li a:link.services,
body.products ul li a:link.products,
body.contact ul li a:link.contact {
background-color: red ; }
</style>
</head>
<body class="about">
<h1>CSS Drop Down Menu</h1>
<div>
<ul>
<li><a class="home" href="#">Home</a></li>
<li ><a class="services" href="#">Services</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 class="Deep Menu 2"><a href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li> <!-- end services-->


<li><a class="about" href="#">About</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 class="products" href="#">Products</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><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> <!-- end products-->
<li><a class="contact" href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>