asked on

menu responsive

how to convert this menu in to responsive web design?
submenu items need to hide and show based on width of the screen.

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
$(document).ready(function(){	
	$('.menu').click(function(){
		$("#topMenu").toggle(100);
	});	
});
</script>
<style type="text/css">
.menu {
	display:none;
}

.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width:100%;
	font-size:14px;
}
.nav {
	float: left;
	margin: 0 0;
}
.nav ul {
	position: absolute;
	top: 25px;
	left: -9999px;
	min-width: 230px;
	z-index:999;
	padding:10px;
	background-color:#fff;
	margin:1px 0 0 0;
}
.nav li {
	float: left;
	position: relative;
	text-align:left;
	z-index:999;
	font-size:14px;
}
.nav ul li {
	float: left;
	position: relative;
	text-align:left;
	z-index:999;
	font-size:14px;
}
.nav li > a {
	float: left;
	padding: 5px 20px 5px 0;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	font-size:14px;
}
.nav li > a:hover, .nav li > a:focus, .nav li:focus > a, .nav li:hover > a {
	color:red;
}
.nav li:hover ul, .nav li:focus ul, ul.show-menu {
	left: 0;
	opacity: 0.99;
}
.nav ul li {
	float: none;
	position: static;
	background:#fff;
	border-bottom:0;
}
.nav ul li a {
	float: none;
	display: block;
	color: #000;
	text-shadow: none;
	border-right:0;
	font-weight:normal;
}
.nav ul a:hover, .nav ul a:focus {
	background: #fff;
	color: red;
	text-shadow: none;
}


@media screen and (max-width: 480px) {
.nav {
 width: 100%;
 margin: 0 0 0 0;
 float:left;
}
ul.nav {
 width: 100%;
 list-style: none;
 margin: 0 0 0 0;
 float:left;
}
ul.nav li {
 float: left;
 width:100%;
}
ul.nav li a {
 display: block;
 clear:both;
 margin-right: 20px;
 line-height: 30px;
 text-align: left;
 text-decoration: none;
 width:100%;
 border-bottom:1px solid #fff;
 float:left;
}
ul.nav li a:hover {
 display: block;
 clear:both;
 margin-right: 20px;
 line-height: 30px;
 text-align: left;
 text-decoration: none;
 width:100%;
 border-bottom:1px solid #fff;
 float:left;
 background-color:transparent !important;
}
ul.nav li.selected a {
 color: #000;
 font-weight:bold;
}
ul.nav ul {
 display:none;
}
.menu {
 display:block;
}
#topMenu {
 display:none;
}
}
</style>
</head>
<body>
<nav id="topMenu">
  <div role="navigation" aria-label="Main menu">
    <ul class="navigation">
      <li><a href="1.html">one</a>
        <ul>
          <li><a href="">10</a></li>
          <li><a href="">11</a></li>
          <li><a href="">12</a></li>
        </ul>
      </li>
      <li><a href="2.html">two</a>
        <ul>
          <li><a href="">20</a></li>
          <li><a href="">21</a></li>
          <li><a href="">22</a></li>
        </ul>
      </li>
      <li><a href="3.html">three</a>
        <ul>
          <li><a href="">30</a></li>
          <li><a href="">31</a></li>
          <li><a href="">32</a></li>
        </ul>
      </li>
      <li><a href="4.html">four</a>
        <ul>
          <li><a href="">40</a></li>
          <li><a href="">41</a></li>
          <li><a href="">42</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<div class="menu">Menu</div>
</body>
</html>

Open in new window

lenamtl

Suggestion you can use Bootstrap for your site.

http://getbootstrap.com/components/#navbar

codelevel

ASKER

I don't want to use bootstrap. I just want some independent code without third party libs.

Member_2_248744

greetings codelevel, , I copied the html in your CODE, and loaded it in my firefox, I saw a standard looking unordered HTML list, , with the standard unordered LIST, left black dots on your one , two, three, four <li> list elements, it did NOT LOOK LIKE A MENU to me at all! !
I looked at your CSS for the -
.nav ul
and your -
.nav li

and could not get much understanding for what the STYLE of the <ul> in the list should show? ?

anyway you have a BIG coding error as you have this -
<ul class="navigation">

which should be this -
<ul class="nav">

but even when I changed it to be more correct, I did not really see much visual styling on the one , two, three, four <li> list elements?, it does show the list stuff (10, 11, 12) on Mouse Over (hover), but your request for responsive help on this, I can not understand? You may should want to start with a more functional and correct MENU code. Can you say what you need for this?

codelevel

ASKER

slick

thanks for the details.

what i need is a simple horizontal dropdown menu and on resize dropdown menu would become vertical with + sign for the menu items that has submenus.

thanks

Member_2_248744

OK, but this is not really a responsive menu, , responsive in that it has say 8 items horizontally, and the items narrow in width, as the view width is smaller, and then at a certain width point, the one row of 8, becomes 2 rows of 4, and will still narrower items with even smaller view width.
yurs is just a switch a menu , having two unrelated (horizontal and vertical) menu views.

I can not work with, our have time to go through all the CSS that your menu has as -

.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width:100%;
	font-size:14px;
}
.nav {
	float: left;
	margin: 0 0;
}
.nav ul {
	position: absolute;
	top: 25px;
	left: -9999px;
	min-width: 230px;
	z-index:999;
	padding:10px;
	background-color:#fff;
	margin:1px 0 0 0;
}
.nav li {
	float: left;
	position: relative;
	text-align:left;
	z-index:999;
	font-size:14px;
}
.nav ul li {
	float: left;
	position: relative;
	text-align:left;
	z-index:999;
	font-size:14px;
}
.nav li > a {
	float: left;
	padding: 5px 20px 5px 0;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	font-size:14px;
}
.nav li > a:hover, .nav li > a:focus, .nav li:focus > a, .nav li:hover > a {
	color:red;
}
.nav li:hover ul, .nav li:focus ul, ul.show-menu {
	left: 0;
	opacity: 0.99;
}
.nav ul li {
	float: none;
	position: static;
	background:#fff;
	border-bottom:0;
}
.nav ul li a {
	float: none;
	display: block;
	color: #000;
	text-shadow: none;
	border-right:0;
	font-weight:normal;
}
.nav ul a:hover, .nav ul a:focus {
	background: #fff;
	color: red;
	text-shadow: none;
}

Open in new window

which has stuff like -
.nav ul {
       position: absolute;
       top: 25px;
       left: -9999px;

and I do not see why there is a position absolute used here as a valid factor for the thing you want!

There are hundreds and hundreds of various menus available now, that do various "Responsive" changes, you may be better off getting an already built and tested menu, that shows in demo, it can do what you want,

But your menu code does not even color block the Main menu items, or do any color or design (shape-borders-background) to anything. You need to have a better CSS starting place for your menu.

codelevel

ASKER

can you please at least do this part :

menus with sub menus need toggle + and -

codelevel

ASKER

slick

attached is working code for switch menu.
what i need is when i resize the browser to mobile size + and - toggle for menus with sub menus in vertical order.

thanks for your efforts.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://staff.washington.edu/tft/tests/menus/simplyaccessible/menu.js"></script>
<script type="application/javascript">
		$(document).ready(function(){	
			$('.menu').click(function(){
				$("#topMenu").toggle(100);
			});	
		});
		</script>
<style type="text/css">
.menu {
	display:none;
}
.nav,  .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Top level nav */
		.nav {
	float: left;
	margin: 20px 0;

}
/* Dropdowns */
		.nav ul {
	position: absolute;
	top: 2.5em;
	left: -9999px;
	opacity: 0;
	
}
.nav li {
	float: left;
	position: relative;
}
/* Top level nav items */
		.nav li > a {
	float: left;
	padding: 10px 15px;
	
	color: green;
	font-weight: bold;
	font-size: 14px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.2);
	text-decoration: none;
}
/* Top level hover state, preserve hover state when hovering dropdown  */
		.nav li > a:hover,  .nav li > a:focus,  .nav li:focus > a,  .nav li:hover > a {
	/* text shadow just makes reading more difficult in my opinion */
			/* text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 -1px 0 rgba(255,255,255,0.2); */
			outline: 0;
}
/* Rounded corners for first top level nav item */
		.nav > li:first-child > a {
	border-left: 0;
}
/* Rounded corners for last top level nav item */
		.nav > li:last-child > a {
	border-right: 0;
}
.nav li:hover ul,  .nav li:focus ul,  ul.show-menu {
	left: 0;
	opacity: 0.99;
}
.nav ul li {
	float: none;
	position: static;
}
.nav ul a {
	float: none;
	display: block;
	font-size: 12px;
	text-shadow: none;
	border-width: 0 0 1px;
	-webkit-transition: 0.1s linear all;
}
/* Rounded corners for ul and last list item */
		.nav ul,  .nav ul li:last-child a {
	border: 0;
}

p {
	clear: both;
}
 @media screen and (max-width: 480px) {
.nav {
 width: 100%;
 margin: 0 0 0 0;
 float:left;
}
ul.nav {
 width: 100%;
 list-style: none;
 margin: 0 0 0 0;
 float:left;
}
ul.nav li {
 float: left;
 width:100%;
}
ul.nav li a {
 display: block;
 clear:both;
 margin-right: 20px;
 line-height: 30px;
 text-align: left;
 text-decoration: none;
 width:100%;
 float:left;
}
ul.nav ul {
 display:none;
}
.menu {
 display:block;
}
#topMenu {
 display:none;
}
}
</style>
</head>
<body>
<div class="menu">III</div>
<nav id="topMenu">
  <div role="navigation" aria-label="Main menu">
    <ul class="nav">
      <li> <a href="../generic.html">About</a>
        <ul>
          <li><a href="../generic.html">News</a></li>
          <li><a href="../generic.html">Governance</a></li>
        </ul>
      </li>
      <li> <a href="../generic.html">Academics</a>
        <ul>
          <li><a href="../generic.html">Degree Programs</a></li>
          <li><a href="../generic.html">Faculty</a></li>
        </ul>
      </li>
      <li> <a href="../generic.html">Admissions</a>
        <ul>
          <li><a href="../generic.html">Undergraduate</a></li>
          <li><a href="../generic.html">Tuition</a></li>
          <li><a href="../generic.html">Financial Aid</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
</body>
</html>

Open in new window

Member_2_248744

I looked at your css code above, and as I said, I do not think that it's worth the effort. I may can find time tomorrow to mess with something. But you may do best, to design your vertical menu in a new display block <div> with it's own separate CSS, , and then just hide the horzontal <div> and show the vertical <div> in your -
@media screen and (max-width: 480px) {

codelevel

ASKER

i am looking for + and - functionality. this menu has menu features that people do not know.

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

codelevel

ASKER

slick

you have provided an entirely different menu that has nothing to do with my code and functionality.
i am at loss of words.
i will close this question as no one else even attempted to provide solution.

thanks