PDA

View Full Version : Mobile friendly website with drop down menus


moondancer8
04-17-2015, 05:33 PM
I am trying to make my website mobile friendly, and am slowly getting there, but cannot work out how to do the menu bar. I currently have it across the top of the site, with quite a few drop down menus (there's a lot of info on my site). When looking at it on a mobile, the drop downs cover up some of the other titles on the menu bar. Is there some way of listing all menu titles separately (without dropping down) at the bottom of the page say? The URL is www.charmsoflight.com if that helps.
Thank you very much.

Ricky55
04-17-2015, 07:31 PM
It doesn't seem to be working correctly on mobile for me at all.

When you get down to mobile the menu should disappear altogether IMO and be replaced by a single drop down menu.

Check this out, this was created by a really respected guy in the community and its something I've used.

Scroll down to the navigation section, loads of excellent examples.

http://bradfrost.github.io/this-is-responsive/patterns.html

Cheers

Richard

Ricky55
04-17-2015, 07:32 PM
You need this type of thing.

http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868/index.html

Not a bad looking site BTW. Better than some of the nightmare sites we see on here sometimes.

moondancer8
04-17-2015, 09:03 PM
Thank you, that's exactly what I need. Are the instructions on how to do that somewhere in the first link you gave me? I'll try to follow them as best I can. :)

Cheers,
Caryl

Ricky55
04-18-2015, 02:08 PM
No instructions as it's not really a tutorial.

That second link I gave you. Download a copy of that. You should be able to pick the bones out of it and get it into your website.

post back if you need a hand.

moondancer8
04-18-2015, 04:26 PM
Thank you, I appreciate your help. How, exactly, do I download a copy of that second link? I'm really only a novice at css code, but am willing to try to work it out. Although any advice will be greatly received. :)

Ricky55
04-18-2015, 09:39 PM
I meant just download it by viewing the page source code. You can download any website this way.

To make it easy for you I've done this and provided a download below.

http://we.tl/1UG5MhGN4r

moondancer8
04-21-2015, 09:03 PM
Thank you, I did copy the page source code, but I can't get it to work on my site. Is there anything else I need to know? Are there any files I need to open or something?

I couldn't open your download - got a message saying "Safari can’t open the file “Menu.rar” because no available application can open it." So, don't know if there was anything extra in it that I may have missed.

Ricky55
04-21-2015, 09:55 PM
It's a compressed folder, you need a program such as win rar to open.

http://www.win-rar.com/start.html?&L=0

Ricky55
04-21-2015, 09:57 PM
This is just a plain zip folder try this instead.

http://we.tl/djF7y6MOzn

moondancer8
04-21-2015, 10:27 PM
You should be able to pick the bones out of it and get it into your website.

post back if you need a hand.

Thank you, the zip folder worked, but I don't really know which bones to pick out of it for my website.

Ricky55
04-24-2015, 04:46 PM
Just copy what they have done.

Copy the HTML replacing the menu items with the ones you require.

Take the css and the javascript and add them to your project.

If you don't know how to do this I would suggest some more training or you'll just be pulling your hair out either that or hire a pro to help you.

If you want to learn then thats great but if you just want a website there are far easier options.

Cheers

Richard

moondancer8
04-24-2015, 05:23 PM
Thank you. I've been playing with it since my last reply and am slowly getting there. I was using the SpryMenuBarHorizontal.css for my menu and loved the look of what I'd created, so now am trying to replicate that look, but not quite getting it.

Cheers,

edbr
04-25-2015, 02:51 AM
would this help/ a multilever\l css menu but easy to modify.
http://jsfiddle.net/noebj02L/

Ricky55
04-25-2015, 01:09 PM
Take it as far as you can. If you get stuck post back and I'll help you. This is s good solution so it's worth the time.

That example from ed is no easier to modify and it's not responsive.

moondancer8
04-26-2015, 12:37 PM
Thank you Ricky55 and edbr. I appreciate your help. Right now, I've managed to get the design (colours, hovers, etc) of the menu bar to be something i'm happy with. I've deleted the Spry, but can't work out why I can't get the new style.css form/sheet (?) into my template.
I use a template for my header, menu bar and footer for all my other pages.
I'm sure this is probably something really simple, that I'm missing, but I just can't work it out. Please help.

Many thanks.

moondancer8
04-26-2015, 10:00 PM
OK, so I finally got it all and it looked just right in my working copy and the "Live View" of my working copy, so I updated my site …. BUT something has gone wrong and the menu bar has disappeared completely. My live site is now looking awful. http://www.charmsoflight.com
Please help me work out what to do? :(

edbr
04-27-2015, 02:00 AM
<link rel="stylesheet" href="file:///Macintosh HD/Users/carylhaxworth/Downloads/Menu/css/style.css">

change the path

moondancer8
04-27-2015, 08:02 AM
Thank you. I've changed it to <link rel="stylesheet" href="css/style.css"> and now (although it's not working on my "working" copy) the bar is showing correctly, BUT the drop down menus aren't working at all.

I really don't know what I've done wrong….?

edbr
04-27-2015, 08:17 AM
<script src="file:///Macintosh HD/Users/carylhaxworth/Downloads/Menu/js/script.js"></script>
same again

moondancer8
04-27-2015, 08:26 AM
I've just changed that to <script src="js/script.js"></script> and the drop down menus are still not working.

What do I need to do? What do I need to change the paths to?

edbr
04-27-2015, 08:46 AM
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="file:///Macintosh HD/Users/carylhaxworth/Downloads/Menu/js/script.js"></script>
</body>
<!-- InstanceEnd --></html>

no still the same

moondancer8
04-27-2015, 09:08 AM
Ok, it's changed now, but still the drop down menus are not working.

What do I do now? What am I missing?

edbr
04-27-2015, 09:18 AM
path is still wrong. js/script.js where is the script?

d a v e
04-27-2015, 10:19 AM
why not use the check links in dreamweaver to see what you're missing?

edit: oh and you only use one space after a full-stop/period (unless you're typing on a typewriter or using a fixed width font ;) )

2nd edit: menu seems to be working now ;) guess you just fixed it.

moondancer8
04-27-2015, 10:24 AM
Thank you, for all your prompting. I appreciate your help and have found it! The drop-down menus are now working! Although, it still isn't showing up as mobile-friendly … so, really don't know what to do. :/

That was a lot of working out for me to change the menu bar, from something that worked (and liked) in the first place, but simply wanted to make mobile-friendly.
I am not a coder or a web-designer, simply someone who wants their website to be user-friendly for everyone and is doing it herself. Is there something I'm still missing?

moondancer8
04-27-2015, 11:15 AM
It's OK, I've worked the mobile-friendly thingy out too! :D

Thank you, everyone for your support. I've learned quite a lot and am pretty proud of myself.

You are much appreciated!

moondancer8
04-27-2015, 11:51 AM
Now, the only thing that is troubling me is the 'W3C Validation'. Could someone please explain what is wrong there?

Thank you so much!

d a v e
04-27-2015, 12:01 PM
remove the spaces in your filenames - replace them with no spaces, hyphens or underscores like this
imagename.jpg
image-name.jpg
or
image_name.jpg

AFAIK the hypen method is generally preferred

moondancer8
04-27-2015, 02:37 PM
Those filenames don't seem to be the problem.

I keep getting this message: 'required attribute "type not specified' for the end of the source code for <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> and <script src="Scripts/script.js"></script>.

I am also getting this message: 'No Character Encoding Found! Falling back to UTF-8.' for the first line of the source code.

What does this mean and how can I correct them? Didn't have this problem before.

d a v e
04-27-2015, 05:39 PM
before you fix those i would suggest using html5 instead of an outdated transitional doctype.


some html 5 resources here
http://html5doctor.com/resources/

moondancer8
04-27-2015, 06:52 PM
I appreciate the advice, dave, thank you. I don't know what the difference between html and html 5 is and not being a coder, or web-designer, I really don't want to get into something that may not need changing for the moment. I just want to fix the things that do need fixing, so right now any advice on the W3C validation stuff would be most helpful.

Thank you.

d a v e
04-27-2015, 08:26 PM
change your jquery to
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

your css link to <link rel="stylesheet" href="css/style.css" type="text/css"/ >

and almost at the bottom
<script src="Scripts/script.js" type="text/javascript"></script >

moondancer8
04-27-2015, 09:33 PM
Thank you so much! :) And, I worked out the bit at the top too! :)

This gal is a very happy one now! Thank you Ricky55, edbr, and d a v e. Much appreciation to all of you.

moondancer8
04-28-2015, 02:23 PM
Oh dear, it looks like there is still a problem. :(

It is all good until you click on a link within one of the main pages. Then it takes you to the page that is linked and the menu shows as a list down the side, instead of a bar across the page. For example: Hover over "Jewellery" on the main menu bar, then click on "Bracelets". All looks fine, until someone wants a closer look at a bracelet and clicks on it. Click on one of them and you'll see what I mean.

I don't know why this is happening because I've used the same template for all the pages. Could someone please help me, as this is likely to lose customers!

Thank you so much!

d a v e
04-28-2015, 02:51 PM
did you update all the pages and did you check the links?

i.e. the main pages are all in the root folder like charmsoflight.com/bracelets.html
but the actual bracelet pages are in
charmsoflight.com/bracelets/... so you need to update the links to the js etc in those folders.

moondancer8
04-28-2015, 04:04 PM
Yes, I updated all the pages and checked the links. They are all using the same template, which is what I put the menu-bar into. That's why I don't understand why those pages are showing differently to the others.
:/

What else should I be looking for?

moondancer8
04-28-2015, 10:09 PM
I've realised that this is happening to all the pages that are files within a folder. What do I need to do to make these work. I've updated them all and they all use the same template, but is there specific code or something that I need to ensure these read properly?
Please help, I'm really confused ….. :/

edbr
04-29-2015, 02:04 AM
i t seems ok to me. which pages are not showing correctly?

d a v e
04-29-2015, 08:22 AM
ed if you go to e.g. jewellery - bracelets then click on a bracelet, then the menu is not styled properly

edbr
04-29-2015, 09:35 AM
ah the problem is the link <script src="Scripts/script.js" type="text/javascript"></script >

should be <script src="../Scripts/script.js" type="text/javascript"></script > Im not familiar with dw templates so I cant comment except the usual use an include, although im sure there is an answer with DW
As its html an object can be used
<object width="400" height="50" data="script.txt"></object>
then script can be in the root or in the folder with different paths

moondancer8
04-29-2015, 10:22 AM
Thank you, d a v e . Yes, the menus in all files that are within folders look like lists, e.g.: http://www.charmsoflight.com/bracelets/Anyolite_Bracelet_BrAn800t.html. Where the menus everywhere else are styled and work properly, e.g.: http://www.charmsoflight.com/bracelets.html. Does anyone know what I can do to fix this?
I've tried looking at the code etc to see what is different between the pages that work and those that don't but can't find what it might be.

edbr
04-29-2015, 12:57 PM
Make the link absolue. Ie http://domain.com/script/script.js edit to correctpath

moondancer8
04-29-2015, 01:43 PM
Sorry edbr, I didn't see your previous reply. Unfortunately, I don't understand what you mean about 'html as an object', but I did change the path as suggested to: <script type="text/javascript" src="http://charmsoflight.com/Scripts/script.js"></script>.

I've updated again and the problem is still there. :/

edbr
04-29-2015, 03:36 PM
Also check path to your style sheet

moondancer8
04-29-2015, 08:02 PM
That was it!!! :D Thank you, edbr, there was another style sheet that needed it's path changed! All done now and looking lovely.

Thank you, thank you, thank you! :D

Ricky55
04-30-2015, 10:55 PM
Fyi Your menu doesn't work properly at smaller screen sizes. You loose the sub levels.

moondancer8
05-01-2015, 10:00 AM
Oh, I haven't noticed losing the sub levels. What can I do about that?