4 replies [Last post]
haxorzer
haxorzer's picture
Offline
newbie
Last seen: 3 years 10 weeks ago
Timezone: GMT+8
Joined: 2016-07-27
Posts: 4
Points: 8

<html>
 
<head>
<title>Home</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head> 
 
<body>
<div id="navmenu" >
<ul>
    <li><a href="home">Homepage</a></li>
    <br/>
    <li><a href="about">About</a></li>
    <br/>
    <li><a href="history">History</a></li>
    <br/>
    <li><a href="col">Contacts and Location</a></li>
    <br/>
    <li><a href="qna">Question and Answer</a></li>
    </ul>
    <div id="button"><span></span><span></span><span></span></div>
    </div>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#button').click(function(){
          $('navmenu').toggleClass('visible'); 
         });
    });
    </script>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ullamcorper diam hendrerit elementum. Curabitur et tellus quis quam rutrum consequat. Proin posuere, purus non malesuada viverra, mi tortor malesuada est, eu tempus eros augue id dolor. Nam quam nulla, condimentum at aliquam in, egestas finibus odio. Ut hendrerit tellus et sollicitudin posuere. Cras vehicula venenatis lacus vel bibendum. Sed malesuada eu mi ac blandit. Curabitur malesuada nisi in magna eleifend ornare ac in ligula. In tincidunt non tellus eget suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed urna congue, finibus nulla nec, aliquam ex. Aenean ac convallis est, vel interdum nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin ullamcorper diam hendrerit elementum. Curabitur et tellus quis quam rutrum consequat. Proin posuere, purus non malesuada viverra, mi tortor malesuada est, eu tempus eros augue id dolor. Nam quam nulla, condimentum at aliquam in, egestas finibus odio. Ut hendrerit tellus et sollicitudin posuere. Cras vehicula venenatis lacus vel bibendum. Sed malesuada eu mi ac blandit. Curabitur malesuada nisi in magna eleifend ornare ac in ligula. In tincidunt non tellus eget suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed urna congue, finibus nulla nec, aliquam ex. Aenean ac convallis est, vel interdum nulla.</p>    
 
</body>    
 
</html>

------------------------------------------------
CSS
body{
    margin:0px;
    padding:0px;
    font-family:"Comic Sans MS", cursive, sans-serif;
}
 
 
#navmenu{
    background:rgb(0,01,33);
    width:180px;
    height:100%;
    display:block;
    position:absolute;
    left:-180px;
    top:0px;
    transition:left 0.7s ease-in-out;
}
 
#navmenu.visible{
    left:0px;
     transition:left 0.7s ease-in-out;
}
 
ul{
    margin:0px;
    padding:0px;
}
 
ul li{
    list-style:none;
}
 
a:hover{
    background:rgb(0,01,17);
}
 
ul li a{
    background:1C1E1F;
    color:#ccc;
    border-bottom:1px solid #111;
    display:block;
    width:180px;
    text-decoration:none;   
}
 
#button{
    display:inline-block;
    vertical-align:middle;
    width:20px;
    height:15px;
    cursor:pointer;
    margin:25px;
    position:absolute;
    top:0px;
    right:-60px;
}
 
#button span{
    height:1px;
    background:#111;
    margin-bottom:5px;
    display:block;
}

haxorzer
haxorzer's picture
Offline
newbie
Last seen: 3 years 10 weeks ago
Timezone: GMT+8
Joined: 2016-07-27
Posts: 4
Points: 8

sorry

i dont know how this site works.. sorry if its messy..

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Use the "code" button or bbcode

I added bbcode tags to your source code, i.e. [code] and [/code].

Gary/mod

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Is this what you want?

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content=
	    "width=device-width, height=device-height, initial-scale=1"
            name="viewport">
    <title>
      Test document
    </title>
 
    <script type="text/javascript"
	    src="test.js" ></script>
 
    <style type="text/css">
    /*<![CDATA[*/
 
    html {
        padding: 0;}
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;}
 
    p {
        font-size: 1em;}
 
    h1,
    h2 {
        font-family: serif;
        margin-bottom: 0;}
 
    /* end boilerplate */
 
    #container {
	margin: 1em auto;
	width: 95%;}
 
    #menu-switch {
	cursor: pointer;
	position: relative;}
 
    #menu-switch span {
	border: 3px outset gray;
	display: inline-block;
	margin-bottom: 1em;
	padding: 0.25em;}
 
    #menu-switch span:active {
	border: 3px inset gray;}
 
    #menu-switch.no-show ul {
	background:rgb(0,01,33);
	width:180px;
	left:-280px;
	position: absolute;
	transition:left 0.7s ease-in-out;}
 
    #menu-switch ul {
	margin-left:0px;
	transition:left 0.7s ease-in-out;}
 
    ul {
	line-height: 2em;
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 200px;}
 
    ul li {
	margin-bottom: 1em;}
 
    ul li::last-child {
	margin-bottom: 0;}
 
    ul li a:hover {
	background-color:#eee;
	color: #333;}
 
    ul li a {
	background-color: #333;
	border-bottom:1px solid #111;
	color:#eee;
	display:block;
	padding: 0 .5em;
	text-decoration:none;}
 
    /*]]>*/ 
    </style>
  </head>
 
  <body>
    <div id="container" >
      <div id="menu-switch">
	<span>menu</span>
      <ul>
	<li><a href="#">Homepage</a></li>
 
	<li><a href="#">About</a></li>
 
	<li><a href="#">History</a></li>
 
	<li><a href="#">Contacts and Location</a></li>
 
	<li><a href="#">Question and Answer</a></li>
      </ul>
    </div>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
      sollicitudin ullamcorper diam hendrerit elementum. Curabitur et tellus
      quis quam rutrum consequat. Proin posuere, purus non malesuada viverra,
      mi tortor malesuada est, eu tempus eros augue id dolor. Nam quam nulla,
      condimentum at aliquam in, egestas finibus odio. Ut hendrerit tellus et
      sollicitudin posuere. Cras vehicula venenatis lacus vel bibendum. Sed
      malesuada eu mi ac blandit. Curabitur malesuada nisi in magna eleifend
      ornare ac in ligula. In tincidunt non tellus eget suscipit. Pellentesque
      habitant morbi tristique senectus et netus et malesuada fames ac turpis
      egestas. Nullam sed urna congue, finibus nulla nec, aliquam ex. Aenean
      ac convallis est, vel interdum nulla.</p>
    </div>
  </body>
</html>

And the javascript

window.onload = function() {
   setUpMenuSwitch();
   }
 
function setUpMenuSwitch() {
   if (!document.getElementById("menu-switch")) {
      return false;
   }
 
   var menu = document.getElementById("menu-switch");
 
   menu.className = "no-show";
 
      // Event handler
 
   menu.onclick = function() {
      if (menu.className == "no-show") {
	 menu.className = "";
      }
 
      else { 
         menu.className = "no-show";
      }
   }
}

Notice that the js is less than 400 bytes compared to the jQuery library of 50KBytes (and that's a small jQuery file). It's nearly always better to assemble your own library than to use a ready made, bloated pig.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

haxorzer
haxorzer's picture
Offline
newbie
Last seen: 3 years 10 weeks ago
Timezone: GMT+8
Joined: 2016-07-27
Posts: 4
Points: 8

Thank you so much

Thank you so much Smile