PDA

View Full Version : Spry menu bar doesn't display in browser


Gavin Whittaker
10-29-2016, 08:50 AM
I guess the title says it all. I'm rewriting my existing website in Dreamweaver, and most of it is going okay, but I have an issue that I've spent several man-days on now and can't resolve. The spry menu bar that I've got displays perfectly in live view - the menu appears, highlights, drops down, etc. - but doesn't display at all in a browser, irrespective of whether the files are on my laptop, or on a remote server. The spry menu is supposed to appear between the title and the subtitle, but all that I can find there is a couple of blank highlightable characters. The page can be found at http://www.miramodus.com/first_site/pages/home.htm.

I created the menu bar so that it sits as a separate file that can be displayed on any page, so that if the website structure changes I only need to change one file, rather than change every page. I've checked the file links in the script and they all seem correct, and I'm now completely stumped. Any help or suggestions to get this working would be very much appreciated - thanks!

d a v e
10-29-2016, 03:03 PM
I would suggest using a normal css styled navigation list, possibly with some php to style the current page - spry menus are pretty outdated as far as i know :)

Whe Ed comes along he can suggest the best bet.
as an example i have each page something like this
<body<?php $pageName = "home"; ?>>

and then in my navigation file (php include) i have
<li><a href="index.php" <?php if ($pageName=="home") echo 'id="current"'; ?>>Home</a></li>
and the style #current defined in my css

also i would suggest trying to make your page fully respsonsive - at the moment it's only down to 760px which rules out a lot of phones (at least in the common portrait view)

the girl in the red top needs resizing to - the orginal is waaay bigger than the thumbnail

white text on black background is pretty high contrast and not very comfortable - if you want black as a backround try an off-white (say #efefef) and larger (16px) text. also don't use centred text for paragraphs—only for short 'snippets'

edbr
10-31-2016, 02:30 AM
agree wirh the menu comment , i havent considered spry sincs a little after it arrived,
as for the current link Dave's way looks fine , it can be acheived with php, javascript (jquey would offer more menu options including transitions if you so desired) or css. i include a css option below
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>egittodascoprire</title>
<style>
a:link, a:visited { color: blue;}

body.home a.home:link,
body.about a.about:link,
body.services a.services:link,
body.products a.services:link,
body.contact a.contact:link { color: white; background-color: red;}
</style>
</head>

<body class="about">

<ul class="nav">
<li><a href="index.html" class="home">Home</a></li>
<li><a href="about.html" class="about">About</a></li>
<li><a href="services.html" class="services">Services</a></li>
<li><a href="products.html" class="products">Products</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>
</ul>
</body>
</html>

edbr
10-31-2016, 03:34 AM
I thought id go a bit further with this. below is a menu with drop downs and sub drop downs . by changing the body class it will effectively highlite the current category. in this instance it is
<body class="about"> but using 'home','services','products' or 'contact' will change the highlite.
This is all css

<!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 a{ display:block; color:#333; text-decoration:none;
line-height:32px; padding:0 15px;}

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

ul li a:link{ background:#f6f6f6}

ul ul{ display:none; position:absolute; top:100%; left:0; background:#fff;
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>

Gavin Whittaker
10-31-2016, 04:34 PM
Dave and edbr, Many thanks to both of you for that - I'm still relatively new to Dreamweaver, so still feeling my way around, but I'll give the css route a go and let you know how I get on (the certainty in your responses gives me a sense that it'll work!). Thanks especially to edbr for the code - that's invaluable! Dave - thanks for the pointers about style, it's incredibly useful to get feedback on that; at the moment, I'm just working on the fundamentals of how I want the website to function with Dreamweaver, and I may end up scrapping it and starting again - but with a clear vision of what I want to do and how.

Of course, I could just pay someone to do this for me, but I'm not that kind of guy...

5svZE9
04-23-2017, 08:26 AM
Want to be part of us?




ruby888 casino (https://goo.gl/yV27TH)