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

codelevelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Suggestion you can use Bootstrap for your site.

http://getbootstrap.com/components/#navbar
codelevelAuthor Commented:
I don't want to use bootstrap. I just want some independent code without third party libs.
Slick812Commented:
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?
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

codelevelAuthor Commented:
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
Slick812Commented:
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.
codelevelAuthor Commented:
can you please at least do this part :

menus with sub menus need toggle + and -
codelevelAuthor Commented:
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

Slick812Commented:
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) {
codelevelAuthor Commented:
i am looking for + and - functionality. this menu has menu features that people do not know.
Slick812Commented:
I do not know what you need as an over all menu presentation, or even what this is suppose to look like. It is always a factor with menus about WHAT sections the menu occupies and what else in in that space that may push that menu as the size changes.

Anyway, here is some codes, based on other menu codes I have done in other projects, the horizontal menu hMenu is not responsive and just exists as an unchanging section of display, the so called "responsive" vertical menu vMenu, is also an unchanging section of display and not responsive to anything, BUT the  sMenu  will be shown when the page width is below  480px  , , however only old and mostly out of date cell phones have portrait widths less than 500px.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style>
.sMenu, .hMenu, .hMenu p, .hMenu u, .vMenu, .vMenu div, .vMenu span, .vMenu a{
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}

.sMenu{
display:none;
position:relative;
width:2em;
height:2em;
font-family:sans-serif;
border:1px solid #449;
color:#449;
text-align:center;
font-weight:bold;
font-size:71%;
line-height:43%;
background:#ccf;
cursor:pointer;
}

.hMenu {
margin:auto 4px;
display:inline-block;
padding:3px;
border:2px solid #44a;
background:#ccf;
}

.hMenu p{
position:relative;
margin:0 2px;
display:inline-block;
padding:2px 6px;
border:2px solid #44a;
background:#def;
cursor:pointer;
}

.hMenu em{
display: none;
position:absolute;
top:1.5em;
left:-1px;
font-style:normal;
z-index:8;
}

.hMenu u{
display:block;
text-decoration:none;
margin:1px;
border:2px solid #44a;
padding:3px;
background:#def;
}

.hMenu a:hover{color:#c33;}
.hMenu p:hover{color:#c33;}

.hMenu p:hover em{
display:inline-block;
}

.vMenu{
display:none;
position:absolute;
top:1.5em;
left:1px;
z-index:9;
width:8em;
padding:3px 0;
border:2px solid #44a;
background:#ccf;
font-weight:normal;
line-height:100%;
font-size:initial;
font-family:initial;
color:#000;
}

.vMenu div{
display:inline-block;
position:relative;
margin:1px 0;
padding:2px 6px;
border:2px solid #44a;
background:#def;
cursor:pointer;
}

.vMenu em{
display: none;
position:relative;
top:-5px;
/**/
font-style:normal;
}

.vMenu a{
display:inline-block;
margin:1px;
border:2px solid #44a;
padding:2px 6px;
background:#def;
}

.vMenu span{
position:relative;
top:1px;
display:inline-block;
width:0.7em;
height:0.7em;
margin-right:4px;
color:#c00;
border:1px solid #a00;
background:#fde2cc;
font-family:sans-serif;
font-size:114%;
line-height:67%;
text-align: center;
font-weight:bold;
padding-top:1px;
}

.vMenu a:hover{color:#c33;}
.vMenu div:hover{color:#c33;}

@media screen and (max-width: 480px) {.hMenu{display:none;} .sMenu{display:block;} }
</style>
</head>
<body>
<div id="sm1" class="sMenu">___<br />___<br />___
  <div id="vm1" class="vMenu">
    <div id="v0"><span id="msp0">+</span>About</div>
    <em><a href="../news.html">News</a><br /><a href="../governance.html">Governance</a></em>
    <div id="v1"><span id="msp1">+</span>Academics</div>
    <em><a href="../programs.html">Degree Programs</a><br /><a href="../faculty.html">Faculty</a></em>
    <div id="v2"><span id="msp2">+</span>Admissions</div>
    <em><a href="../undergrad.html">Undergraduate</a><br /><a href="../tuition.html">Tuition</a><br /><a href="../financial.html">Financial Aid</a></em>
    </div>
    </div>
<div class="hMenu"><p>About
  <em>
    <u><a href="../news.html">News</a></u>
    <u><a href="../governance.html">Governance</a></u>
  </em>
 </p><p>Academics
  <em>
    <u><a href="../programs.html">Degree Programs</a></u>
    <u><a href="../faculty.html">Faculty</a></u>
  </em>
 </p><p>Admissions
  <em>
    <u><a href="../undergrad.html">Undergraduate</a></u>
    <u><a href="../tuition.html">Tuition</a></u>
    <u><a href="../financial.html">Financial Aid</a></u>
  </em>
 </p>
</div>
<hr>

o
<script>
var vm1 = document.getElementById("vm1");
var sm1=document.getElementById("sm1");
sm1.onclick= function(event){
if(event.target != sm1) return;
//alert("event as "+event.target);
  if (vm1.style.display == "block")vm1.style.display = "none";else vm1.style.display = "block";};
var level1 = vm1.getElementsByTagName("div");
for(var i=0;i< level1.length;i++) {
  level1[i].onclick= function(){ShoHide(this);}
  }
  
function ShoHide(dv) {
var pos1 = parseInt(dv.id.charAt(1));
//alert('click on ID: '+pos1);
var spn = document.getElementById("msp"+pos1);
if (spn.innerHTML == "+") {
spn.innerHTML = "-";
spn.style.color = "#0c0";
spn.style.borderColor = "#0c0";
spn.style.lineHeight="51%";
}else{
spn.innerHTML = "+";
spn.style.color = "#c00";
spn.style.lineHeight="67%";
spn.style.borderColor = "#a00";
}
var em1 = vm1.getElementsByTagName("em");
if (em1[pos1].style.display == "inline-block")em1[pos1].style.display = "none";else em1[pos1].style.display = "inline-block";
}

</script>
</body>
</html>

Open in new window



for the sMenu, I usually use an IMAGE, but I just did it with CSS for this, This works for me in firefox.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
codelevelAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.