I made a Side menu that transitions , how am i able to let it push the body?

4 replies [Last post]

Wed, 2016-07-27 09:17

haxorzer

Offline

newbie

Last seen: 6 years 34 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;
}

Tags:

Wed, 2016-07-27 09:18

haxorzer

Offline

newbie

Last seen: 6 years 34 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..

Wed, 2016-07-27 20:39

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 4 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

Thu, 2016-07-28 02:24

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 4 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

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.

Thu, 2016-07-28 13:03

haxorzer

Offline

newbie

Last seen: 6 years 34 weeks ago

Timezone: GMT+8

Joined: 2016-07-27

Posts: 4

Points: 8

I made a Side menu that transitions , how am i able to let it push the body?

sorry

Use the "code" button or bbcode

Is this what you want?

Thank you so much

User login

Navigation