Skip to main content
Ron-P
Ron-P
Participant
October 30, 2021
Question

Navigation menus still in Spry

  • October 30, 2021
  • 2 replies
  • 362 views

I did a few websites in Dreamweaver back in CS6 times and they are still active. However recently I have had to make quite a few changes for clients. I find that in the latest version of Dreamweaver, they still work - sort of - I say sort of because it is poretty much impossible to update items in menus because the Spry menus I used back in the day no longer work in Dreamweaver CC...ie the little blue tag you could click is no longer there so all the Spry details are inaccessible. Can someone steer me towards a tutorial that can show me how to redo these menus in Dreamweaver CC? They are pretty straightforward, I just do not know where to begin after lots of searching and trying.

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 30, 2021

    Spry is woefully outdated and not touch screen or mobile-friendly.  The scripts haven't been touched since 2006.  Adobe saw fit to abandon Spry and remove the feature from DW in 2013.  

     

    Replace the outdated Spry menus with something more robust that functions well on mobile, tablet and desktops.  If you rebuild the sites with Bootstrap responsive layouts, you can insert a Bootstrap Navbar from DW CC's Insert menu > Bootstrap Components.  See screenshot.

     

     

    A working example:

     

    <!doctype html>
<html lang="en">
<head>
<title>Bootstrap 4.5 Starter Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
/**Some Custom Styles for Demo Purposes**/
.container-fluid {
padding-top:75px;
min-height: 900px;
background: url(https://placeimg.com/1500/900/nature) no-repeat center center fixed;
background-size:cover;
}
.opacity-3 {background:rgba(0,0,0,0.6)!important;}

</style>
</head>
<body class="pt-5">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"><a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Sub-menu 1</a> <a class="dropdown-item" href="#">Sub-menu 2</a> <a class="dropdown-item" href="#">Sub-menu 3</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li>
</ul>
</div>
</nav>

<!--MAIN CONTENT-->
<main class="container-fluid">
<div class="row">
<div class="col-md-8 mx-auto  opacity-3 text-light mt-5">
<h3 class="m-1 p-4">Bootstrap 4.5 in Dreamweaver</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis molestiae veniam ab doloremque illum amet sint, iure labore magni aspernatur architecto eligendi consectetur hic maxime reprehenderit nesciunt similique saepe odio.</p>
</div>
</div>
</main>

<!--Supporting Scripts-->
<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>


    Code Tutorials:
    - https://www.w3schools.com/html/
    - https://www.w3schools.com/css/
    - https://www.w3schools.com/bootstrap4/

    Hope that helps.  Post back if you have any questions.

     

     

    Nancy O'Shea— Product User & Community Expert
    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    October 30, 2021

    The Spry Menus can still be updated but only via the code because as you eluded to the interface has been removed.  At this point DW has started supporting frameworks like Bootstrap which have nav components in them ( https://getbootstrap.com/docs/5.1/components/navs-tabs/ ), but you can't just insert the bootstrap component on a page that was not built using the framework as you could end up with unexpected results.  There are also other considerations to make for a client whether using a DW site is the right solution, or whether it would be better to move them into a CMS (ie: wordpress) or a hosted solution (ie: wix) that you maintain for them.  Or there are menu plugins you could add to DW like from Project Seven ( https://www.projectseven.com ).  If you could share a link to your site or more information about the current maintenance of the site we could help give you some more recommendations.

      Ron-P
      Ron-PAuthor
      Participant
      November 4, 2021

      Hi

      Thanks for the replies...

      The site I was updating is

      Yumeijin.co.uk

      It is a Chinese restaurant, and the menus and pics change from time to time...

      I think it is time probably to remake the entire site in Dreamweaver CC.

      Was just wondering how to start and get the top of the page menu to look pretty much as it is now with the dropdowns etc.

      When the menu is placed is it similar to the way I set up the links (in Spry back in CS5 time I think I did it) etc using the Properties panel?

      If it is not obvious, I am not a website designer - I am a journalist and did these websites more of a favour....my wife is Chinese and has connections to the restaurant trade.

      If possible I would rather set everything up in Live view - I am not used to working with code (and it was a long time ago I did the originals!)

       

       

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      November 4, 2021

      I don't mean to be disparaging but honestly if you can't work with code, you shouldn't be building websites for businesses.  What you don't know could do more harm than good.  And that could come back to bite you legally. 

       



        • Websites that do business in Europe must meet EU consumer and data protection laws.



      • The domain is not on a secure HTTPS server.  Or if it is, the certificates don't match the domain name which sends up red flags in browsers and could potentially drive customers away. 

       

      In short, there's a lot more to building proper web sites these days than just slapping together some pictures and text and calling it a day.  If you can't invest the necessary time and effort into learning what you don't know, consider using an online site builder like Wix, Webflow or Squarespace that require little if any web experience.

       

      Best of luck!

       

      Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices