Solved

Drop down menu in dreamweaver cs5

Posted on 2014-04-16
5
278 Views
Last Modified: 2014-05-01
I see that you can create a menu and submenu with the spry feature. Now is it possible to replace those buttons with the buttons graphic? Below is what I have in mind. Thanks

buttons
0
Comment
Question by:leblanc
5 Comments
 
LVL 32

Accepted Solution

by:
Big Monty earned 125 total points
ID: 40007059
dreamweaver is just a html editor, it doesn't automatically create things like that, it will just help you with generating the basic html for it.

Have you looked into using the jquery tabs library? pretty simple to set up and you can generate your own custom look using the theme roller jquery has

https://jqueryui.com/tabs/
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 40010560
I agree with Big Monty to use jquery.  Spry is a mess and Adobe has dropped support for it in 2012 where jquery is continually updated.  Things are changing way too fast to rely on anything not updated from 2012.  Since that time, Chrome browser has gone through 10 version changes...

http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.html.    

Using this sample as a base, you can add your own css to make it look the way you want.
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>
 
 
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:leblanc
ID: 40010871
Scott Fell,

So it looks like the jquery code is on the code.jquery.com server. So if the server is down, all the jquery functionality is unusable. Correct?

Also, I am not sure that your code has a navigation bar.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 40010881
The sample I pulled is directly from the jquery site that Big Monty pointed you to.  I recreated the sample here http://jsbin.com/vilec/1/edit?html,output.   You will have to use your own css with the jquery ui to make it your own.

You can just as easily download jquery to your own server.  http://jquery.com/  See the big download button.  1.x is if you want to support older I.E.    2.x is the exact same thing, but does not support older I.E. and therefor is a bit smaller file.  

The file is loaded from one URL but it is on a CDN so the chances of that being down are less than your own server to be down.   The CDN is easier to use for testing like this, but you are good to load it from your own server.
0
 
LVL 24

Assisted Solution

by:lenamtl
lenamtl earned 125 total points
ID: 40018171
Easy quick solution :

You can buy 3$ menu (no JS required)
http://codecanyon.net/item/css3-drop-menu/2174442
there other cheap example on this site that may look more what you are looking for.

If you need a complete toolbox
Menu generated with this tool will look like the image you posted
Artisteer is very easy to use
www.artisteer.com
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

If your app took Google’s lash recently, here are the 5 most likely reasons.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
An overview on how to enroll an hourly employee into the employee database and how to give them access into the clock in terminal.

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now