0

How do u make mobile drop down button on click that can appear and disappear

i mean a navigation bar like that of Google play store that can appear and disappear

9th Feb 2017, 12:14 AM
Ejeye Timmy
Ejeye Timmy - avatar
19 ответов
+ 7
What you ask for is considered responsive web development. A navigation bar can be done in many several different ways. There are a bunch of online generators out there at your disposal. These can probably get the job done for you quickly, just make sure you get full access to the source code. Anyway, I will try to put it quick and simple for you but I still think you should YouTube: " Responsive Website Menu " for more detailed info.... * Elements that are commonly used for navbars...: <button>, <ul>, <li>, <nav>. * Libraries often used for navbars...: Bootstrap.css (built-in classes for navbars) & jQuery, of course. Now, note that html drops the menu on paper. it will look ugly until you pimp it with css/bs. classes. <body> <ul id="menu-bar"> <li class="active"><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a> <ul>   <li><a href="#">Menu item 2 Sub Menu 1</a></li>   <li><a href="#">Menu item 2 Sub Menu 2</a></li> <li><a href="#">Menu item 2 Sub Menu 3</a></li> </ul> </li> <li><a href="#">Menu item 3</a> <ul> <li><a href="#">Menu item 3 Sub Menu 1</a></li> <li><a href="#">Menu item 3 Sub Menu 2</a></li> <li><a href="#">Menu item 3 Sub Menu 3</a></li> </ul> </li> </ul> <!--Menu is above--> <!--Website content goes here--> // This is all you need to get your simple menu to work with sub categories. Notice how <ul> and <li> deals with your request. Then just copy-paste some css to set you style.... (For this example I went for a black and white plain simple menu)... The finished product can be found here: https://code.sololearn.com/WSqu65FX2dC8/#
9th Feb 2017, 3:14 AM
Tristan McCullen
Tristan McCullen - avatar
+ 5
About the 'hamburger menu' on Google play store you mentioned. You know when it appears and disappears. This is made by either using bootstrap.css or putting @media in css. @media (min-width: 321px) and (max-width: 480px) { <!--landscape size on smartphone--> } @media (min-width: 481px) and (max-width: 786px) {<!--portrait size on tablet.--> } <!--In the brackets { ... } you set a few rules you wish to happen when screen is at this resolution.--> <!--For example : you could order that menu is hidden and a red square appears which toggles the menu. the square could be red when hidden and green when visible. You could then replace the colors with animation of a 'hamburger menu' (Google it)-->
9th Feb 2017, 3:45 AM
Tristan McCullen
Tristan McCullen - avatar
+ 3
@Ejeye Timmy Happy I could help. :)
9th Feb 2017, 3:08 PM
Tristan McCullen
Tristan McCullen - avatar
10th Feb 2017, 7:11 PM
Ehtesham Ali
Ehtesham Ali - avatar
+ 1
thanks Tristan ur the best
9th Feb 2017, 6:44 AM
Ejeye Timmy
Ejeye Timmy - avatar
10th Feb 2017, 6:44 PM
Ehtesham Ali
Ehtesham Ali - avatar
+ 1
My code will help you just try it
10th Feb 2017, 6:45 PM
Ehtesham Ali
Ehtesham Ali - avatar
+ 1
I will soon make it for you plz wait
10th Feb 2017, 6:51 PM
Ehtesham Ali
Ehtesham Ali - avatar
+ 1
Now check this I think it is better
10th Feb 2017, 7:10 PM
Ehtesham Ali
Ehtesham Ali - avatar
+ 1
If it is better than plz Inform me and for any kind of help in coding inform before its too late
10th Feb 2017, 7:13 PM
Ehtesham Ali
Ehtesham Ali - avatar
0
plus u have some tutorials online Rie i think i might have seen a few
9th Feb 2017, 6:44 AM
Ejeye Timmy
Ejeye Timmy - avatar
0
av seen ur code am preety familiar wif that i can make nav bars like that an i think am preety good with responsive CSS wah i wanna know is how to make a drop down menu that appears onClick basically for mobile phones kuz they can't hover over anything so i wanted to make something like a option bar
9th Feb 2017, 6:58 AM
Ejeye Timmy
Ejeye Timmy - avatar
0
thanks Ali its rilli helpful
10th Feb 2017, 6:48 PM
Ejeye Timmy
Ejeye Timmy - avatar
0
how about a slide in and out nav bar
10th Feb 2017, 6:48 PM
Ejeye Timmy
Ejeye Timmy - avatar
0
i know how to make it buh av been doing writing the code buh it don't work i don't know what am missing buh its killing me
10th Feb 2017, 6:49 PM
Ejeye Timmy
Ejeye Timmy - avatar
0
k thanks I'll appreciate
10th Feb 2017, 6:52 PM
Ejeye Timmy
Ejeye Timmy - avatar
0
i rilli appreciate ur effort buh u haven't got it quite yet hollop Lemmy link u to website with it
10th Feb 2017, 7:15 PM
Ejeye Timmy
Ejeye Timmy - avatar
10th Feb 2017, 7:17 PM
Ejeye Timmy
Ejeye Timmy - avatar
0
the nav bar is at the top right corner with a button of 3 horizontal lines
10th Feb 2017, 7:19 PM
Ejeye Timmy
Ejeye Timmy - avatar