html - Menu list doesn't appear in div as expected -

-

i want create navigation menu sidebar.

it should have links ul list not displaying on div element

i want using css only.

pure css required because don't have scripting language knowledge

<!doctype html>     <html lang="en">         <head>             <title>sidebar</title>             <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons             "/>             <style type="text/css">                 /*                  #button {                  display: block;                  text-decoration: none;                  margin-top: 20px;                  margin-left: 50px;                  color: white;                  width: 20px;                  height:20px;                  font-size: 30px;                  transition: width 0.5s;                  background-color: black;                  text-align: center;                  padding-bottom: 30px;                  box-sizing: border-box;                  }*/                  #button {                     margin-top: 20px;                     margin-left: 50px;                     font-size: 30px;                     cursor: hand;                 }                  #sidebar {                     position: absolute;                     background-color: black;                     left: 0px;                     top: 0px;                     width: 0px;                     height: 100%;                     transition: width 0.5s;                     opacity: 0.7;                 }                  #screen {                     position: fixed;                     background-color: tan;                     height: 100%;                     width: 100%;                     left: 0px;                     top: 0px;                 }                  #button:hover + #sidebar {                     width: 200px;                 }                  #sidebar:hover {                     width: 200px;                 }              </style>         </head>          <body>              <div id="screen">                  <i class="material-icons" id="button">menu</i>                  <div id="sidebar">                     <ul>                         <li><a href="#1">nav 1</a></li>                         <li><a href="#2">nav 2</a></li>                         <li><a href="#3">nav 3</a></li>                     </ul>                 </div>                  <hr />                 <div>                     hello                 </div>             </div>          </body>     </html>

because in css have #sidebar{ width: 0px;} ul cannot contained inside div, instead play left value rather width jsfiddle

#button {       margin-top: 20px;       margin-left: 50px;       font-size: 30px;       cursor: hand;   }  #sidebar {       position: absolute;       background-color: black;       left: -200px;       top: 0px;       width: 200px;       height: 100%;       transition: width 0.5s;       opacity: 0.7;       padding-top:50px;   -webkit-transition: left 1s;  transition: left 1s;   }   #sidebar ul {   list-style-type:none;   }   #screen {   position: fixed;   background-color: tan;   height: 100%;   width: 100%;   left: 0px;   top: 0px;   }   #sidebar:hover, #button:hover + #sidebar {   left: 0;   -webkit-transition: left 1s;  transition: left 1s;   }
<div id="screen"><i class="material-icons" id="button">menu</i>        <div id="sidebar">          <ul>              <li><a href="#1">nav 1</a></li>              <li><a href="#2">nav 2</a></li>              <li><a href="#3">nav 3</a></li>          </ul>      </div>      <hr />      <div>hello</div>  </div>

note: added transition: left 1s; make transition of sliding page , out -webkit- supporting issues


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

android - Go back to previous fragment -

-
btw second fragment. appear once press button in first fragment. in fragment, if press button on phone, go previous fragment. need guys. in advance. public class listalldoctorfragment extends fragment { button close; @nullable @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { view view = inflater.inflate(r.layout.listalldoctor, container,false); close = (button) view.findviewbyid(r.id.button); close.setonclicklistener(new view.onclicklistener() { @override public void onclick(view view) { android.app.fragmentmanager fm = getfragmentmanager(); fragmenttransaction ft = fm.begintransaction(); shit f2 = new shit(); ft.add(r.id.content_frame, f2); ft.addtobackstack(null); ft.commit(); } }); return view; } } assuming want g...
Read more