New course! Every coder should learn Generative AI!
Try a free lesson0
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
19 Answers
+ 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/#
+ 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)-->
+ 3
@Ejeye Timmy
Happy I could help. :)
+ 1
thanks Tristan ur the best
+ 1
My code will help you just try it
+ 1
I will soon make it for you plz wait
+ 1
Now check this I think it is better
+ 1
If it is better than plz Inform me and for any kind of help in coding inform before its too late
0
plus u have some tutorials online Rie i think i might have seen a few
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
0
thanks Ali its rilli helpful
0
how about a slide in and out nav bar
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
0
k thanks I'll appreciate
0
i rilli appreciate ur effort buh u haven't got it quite yet hollop Lemmy link u to website with it
0
here it is
https://www.pexels.com
0
the nav bar is at the top right corner with a button of 3 horizontal lines
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
0 Votes
Android studio emulator
0 Votes
Return function
1 Votes
[SOLVED] About split() Function
1 Votes
help me
0 Votes