Problems with sample html page, copied from your example [Archive]

View Full Version : Problems with sample html page, copied from your example

craigsn

01-26-2015, 04:49 PM

1) Script Title:
:: Responsive Hybrid Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/index.html

3) Describe problem:
I copied the "developers view" sample code (http://www.dynamicdrive.com/dynamicindex1/responsivehybridmenu/dev.htm) to a local file, saved it as an HTML file, then opened it locally in IE 11, FireFox 36 and Chrome (whatever), and in all the cases, it was nothing like the sample on the main page.

I didn't get the green menu bar across the top, with either the icons or the text, depending on my window size. Everything showed up in the body of the page:


logo
Menu Item 1 Submenu Item 1
Submenu Item 2
Submenu Item 3
Submenu Item 4

Menu Item 2 Submenu Item 1
Submenu Item 2
Submenu Item 3

Menu Item 3 Submenu Item 1
Submenu Item 2
Submenu Item 3
Submenu Item 4
Submenu Item 5

 Menu Item 5 Submenu Item 1
Submenu Item 2
Submenu Item 3

 Menu Item 4 Submenu Item 1
Submenu Item 2

Your Page contents

This copy is for testing reasons inside main content section

This copy is for testing reasons inside main content section

This copy is for testing reasons inside main content section

Copied over the hybridmenu.css file and the hybridmenu.js to the same directory as the HTML file. There we 2 things I had to change to make the page load, and that was add a <html> tag and a <head> tag at the beginning of the file, the are not there in the Developer's View. This makes me think I have to make some other modifications to the code to make it work, but I don't know what that would be.

Your help would be appreciated. I will be more than happy to add my files as attachments if that would help.

jscheuer1

01-26-2015, 06:27 PM

There's a typo on the developer's view page. Either follow the step by step directions on the demo page (recommended because it tells you to download certain files that are also required) or make this change to the developer's view - change:

</head>

<body>

<nav id="mobile-menu"></nav>
<nav id="menu">
<ul class="main-menu">
<li class="mobile-menu-item"><i class="fa fa-bars"></i></li>
<li class="logo">
<a href="http://www.dynam . . .

to:

</head>

<body>

<nav id="mobile-menu"></nav>
<nav id="hybridmenu">
<ul class="main-menu">
<li class="mobile-menu-item"><i class="fa fa-bars"></i></li>
<li class="logo">
<a href="http://www.dynam . . .

As I say, make sure to also download the helper files (hybridmenu.js and hybridmenu.css) and put them in the same folder as your page.

If you want more help - please include a link to the page on your site that shows the problem.

craigsn

01-26-2015, 07:40 PM

Hello John, thank you for the quick response.

Ok, I created a new file based on the step by step directions, as you suggested. But it still isn't working correctly for me.

You can look at the 2 files I created at http://maissoft.com/WebTest/default.html and http://maissoft.com/WebTest/test.html

jscheuer1

01-26-2015, 08:07 PM

This one works for me:

http://maissoft.com/WebTest/test.html

What browser are you using - or, maybe I'm missing a small flaw. The menu appears to work for me in any case.

Or, maybe you fixed it already.

craigsn

01-27-2015, 04:01 PM

John, thanks again for being so responsive.
I use 5 browsers to test with, IE 11, Windows Phone IE, Firefox (latest), Chrome (beta), and Opera (beta). In all the browsers, when the browser windows is fairly large, I get the text menus, and it seems ok. But when I make the windows smaller, in all cases (except Windows IE 11), I get a small empty boxes instead of the icons for html, css, settings, phone and comments. For some reason, they are not showing up as icons, only boxes. Looking at the CSS file, I see the reference to those icons, but no joy on the display.

jscheuer1

01-27-2015, 10:30 PM

Best I can tell you're missing the link to the font-awesome.css file (from step one on the demo page):

meta name="viewport" content="width=device-width">

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<link href="hybridmenu.css" rel="stylesheet">





There could also be other problems. But just adding that to your page got rid of the squares and brought back the default menu symbols used when the page is narrower.

craigsn

01-28-2015, 11:57 AM

Yup, that did it John. I don't know how I missed it. But I think my editor (Expression Web 4) changed it to a local file, and that was the problem. I really appreciate all of your help in tracking this down. As you probably surmise, I'm fumbling around trying to figure out CSS and html5, so your material and help are important.

Thanks
Craig

craigsn

02-19-2015, 04:26 PM

John I have some more issues with my website. I've been busy modifying the menu, adding things, and such. But a couple of issues when I make the browser into the small screen mode, mobile-menu, with the menu bar on the left, and the logo on the right.

1) When I scroll down on a page, the menu disappears and the screen area where the menu would be is grey. I have to scroll to the top of the page to get the menu back. Which is not intuitive. So is that the only choice I have. If so, then I have to rethink the whole use of this template.

2) The menu also doesn't seem to work for local items (I've put some of the website in the same page (default.html), the first 4 menu items are all in default.html, the last item, Forms, is a submenu with 2 items. The submenu works great, but the first 4 items do not work in the small format. Suggestion?

Thx again

jscheuer1

02-19-2015, 06:14 PM

I take it this is only on a mobile device. If not, which browser. If so, I don't have a mobile to test on, so all I can suggest is to make sure you have all of the support files and are using the correct syntax for this menu.

Also, feel free to start a new thread - as this is a new issue, and someone with a mobile, perhaps even the menu's author could respond.