PDA

View Full Version : simple drop down menu



angela5117
05-06-2015, 10:03 PM
im a beginner, and i need a simple drop down menu.

molendijk
05-07-2015, 12:09 AM
A very basic menu would be a selectbox navigation menu. Try this:

1. Create a file menu.html and put something like this inside it:

<!doctype html>
<html >
<head>

<title>&nbsp;</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<select onchange="window.open(this.options[this.selectedIndex].value,'_top'); selectedIndex=0" style="cursor: pointer">
<option value="" selected>Select page</option>
<option value="page1.html">page 1</option>
<option value="page2.html">page 2</option>
<option value="page3.html">page 3</option>
</select>

</body>

</html>

2. Create pages that you want to contain the menu by putting this inside them:

page1.html:

<!doctype html>
<html >
<head>

<title>Page 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<iframe style="position: absolute; top: 5px; left: 50%; height: 60px; border:0" src="menu.html" onload="this.style.marginLeft=-this.clientWidth/2+'px'"></iframe><br>

page 1
</body>

</html>

page2.html:

<!doctype html>
<html >
<head>

<title>Page 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<iframe style="position: absolute; top: 5px; left: 50%; height: 60px; border:0" src="menu.html" onload="this.style.marginLeft=-this.clientWidth/2+'px'"></iframe><br>

page 2

</body>

</html>

page3.html:

<!doctype html>
<html >
<head>

<title>Page 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<iframe style="position: absolute; top: 5px; left: 50%; height: 60px; border:0" src="menu.html" onload="this.style.marginLeft=-this.clientWidth/2+'px'"></iframe><br>

page 3
</body>

</html>

Any change you make in menu.html will be visible in the other pages.

There are many other possibilities, but this method is among the most simple ones in terms of coding and maintainance of the menu.

Beverleyh
05-07-2015, 05:49 AM
I would not recommend including your main site navigation into web pages via frames. Search engines have a hard enough time crawling them and they create accessibility problems, so hiding your menu in them will seriously hinder movement around a site, particularly for spiders and people using assistive technology.

From Google https://support.google.com/webmasters/answer/34445?hl=en;
Google supports frames and iframes to the extent that it can. Frames can cause problems for search engines because they don't correspond to the conceptual model of the web. In this model, one page displays only one URL. Pages that use frames or iframes display several URLs (one for each frame) within a single page. Google tries to associate framed content with the page containing the frames, but we don't guarantee that we will.


Another inclusion method for menu maintainability would be more appropriate, such as server side includes or php includes that "knit" the contents into the parent web page markup so that it is served as a whole page. Or just put the menu markup on the actual web page.

angela5117 - we have no way of assessing what "simple" means to *you*, or what menu would suit your needs, so try searching Google for menus, or check the DD library here http://www.dynamicdrive.com/dynamicindex1/index.html for options that may be suitable. Feel free to come back and ask more specific questions once you've made your script choice.

molendijk
05-07-2015, 11:19 AM
angela5117 sais she's a beginner and wants a simple menu. So server side includes won't be an easy option here from a didactical point of view.
Beverleyh, the search engine issues you refer to affect framesets, because pages within framesets are not main pages. I dont't see how they could affect a main page X that contains an iframed menu-page Y, as X is the main page, not Y. So search engines will easily find what's written on X.
For a beginner, the combination of an iframe and a selectbox menu has the advantage of allowing him/her to put the menu inside a small-sized iframe that does not prevent the subitems to show OUTSIDE the iframe (because a select box is a windowed element).
Anyhow, the method I described can be slightly modified so as to avoid the use of both iframes and PHP:

page1.html:

<!doctype html>
<html >
<head>

<title>Page 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
<div id="the_menu" style="position: absolute; top: 5px; left: 50%; height: 17px; border:0" ></div><br>

page 1

<script>
$('#the_menu').load('menu.html')
</script>
</body>

</html>

page2.html

<!doctype html>
<html >
<head>

<title>Page 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
<div id="the_menu" style="position: absolute; top: 5px; left: 50%; height: 17px; border:0" ></div><br>

page 2

<script>
$('#the_menu').load('menu.html')
</script>
</body>

</html>

page3.html

<!doctype html>
<html >
<head>

<title>Page 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
<div id="the_menu" style="position: absolute; top: 5px; left: 50%; height: 17px; border:0" ></div><br>

page 3

<script>
$('#the_menu').load('menu.html')
</script>
</body>

</html>

Beverleyh
05-07-2015, 02:25 PM
Hmmm, the danger here is that without any raw menu markup in the actual web page, one is relying on the presence and successful loading, execution and interpretation of JavaScript, to render the menu on screen. This is a failing on more than one level - without the basic menu structure provided in-page there is no safety net for when things go wrong. Or for when things are just different (screen readers, plain text browsers, old browsers, intentional filtering/blocking). How do users navigate a JavaScript reliant navigation system in these instances?

I'm employed as a web technician by local government so I'll leave this Government service manual link here regarding *progressive enhancement*, which is a look into the guidelines I adhere to for work: https://www.gov.uk/service-manual/making-software/progressive-enhancement.html It's about putting content first and then adding layers of styling and JavaScript for those who are able to use it. It very interesting and worth the read.


Beverleyh, the search engine issues you refer to affect framesets, because pages within framesets are not main pages.Regarding your comment here, I think we are interpreting the Google advice differently. I'm reading frames to include all forms of framing (iframe and framesets). The advice states that the conceptual model of the web is one URL per page - but pages that use frames or iframes display several URLs, which Google cannot guarantee making an association with. I can see how you have interpreted it differently though.

With regard to the simple dropdown menu, I think we should wait on angela5117 coming back to us with more information.

molendijk
05-07-2015, 03:42 PM
Hmmm, the danger here is that without any raw menu markup in the actual web page, one is relying on the presence and successful loading, execution and interpretation of JavaScript, to render the menu on screen.
You're right, although I must say that jquery-load has never let me down. There's no such danger when we use the iframe-method described in my first post.

As for the Google advice, I think we must strictly separate inline frames and frames of framesets. Framesets are bad for numerous reasons. But I honestly don't see how a search engine could miss the main content of a main page simply because of the presence of an iframe on the page. The engine might miss the iframe-content, which is not an issue here.

I will read the progressive-enhancement-article, thanks very much for the link.