Skip to main content

Posts

Showing posts from March, 2017

how to create tabbed menu

Tabs Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects: <!DOCTYPE html> <html> <head> <style> body {font-family: "Lato", sans-serif;} /* Style the tab */ div.tab {     overflow: hidden;     border: 1px solid #ccc;     background-color: #f1f1f1; } /* Style the links inside the tab */ div.tab a {     float: left;     display: block;     color: black;     text-align: center;     padding: 14px 16px;     text-decoration: none;     transition: 0.3s;     font-size: 17px; } /* Change background color of links on hover */ div.tab a:hover {     background-color: #ddd; } /* Create an active/current tablink class */ div.tab a:focus, .active {     background-color: #ccc; } /* Style the tab content */ .tabcontent {     display: none; ...
1 comment
Read more

How to Create Accordion

Accordion: Accordions are useful when you want to toggle between hiding and showing large amount of content: <!DOCTYPE html> <html> <head> <style> button.accordion {     background-color: #eee;     color: #444;     cursor: pointer;     padding: 18px;     width: 100%;     border: none;     text-align: left;     outline: none;     font-size: 15px;     transition: 0.4s; } button.accordion.active, button.accordion:hover {     background-color: #ddd;  } div.panel {     padding: 0 18px;     display: none;     background-color: white; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel">   <p>om jiLorem ipsum dolor sit amet, consectetur a...
1 comment
Read more