In this tutorial, we are going to learn about bootstrap drop down menu bar and in this respect
we are going to understand different aspects like fixed top or fixed
bottom bootstrap menu bar..
Hello and welcome to another new episode of learning simplified.
In this tutorial, we are going to understand different aspects of bootstrap menu bar.
In this respect first of all, we are going to create
a bootstrap menu bar first, as we can see over here this menu bar, this is actually
sticking to its top.
Besides we can see a
presence of a glyph icon as an image over here and if we now enter into our mobile responsive
view we can see that another image has been appeared over here on
clicking which we can see that the corresponding drop down menus as items are being observed,
and on clicking on this left icon we can see that it is coming down to
its further list items.
Each and and every Bootstrap menu bar, it practically consists of a header part, and
on clicking which a collapsible item gets down and we
can see that the rest of the menu items those should have been observed in the standard
desktop preview.
So let's get back to our tutorial.
And here we have already created a container banner6 in this purpose as we can see we have
created another row we have created a col-lg-12, we may use here
container-fluid or container banner whatever you wish to have and if you get back to our
preview, and if you reload, we can see that this is the thing that has been
created, this bluish bar.
Now inside this, I am creating these commands... here inside this navbar-header, I am creating
a button type...
And corresponding class of...
Now here I can create three distinct classes such as....
Now I am using another class over here which is known as navbar-brand...
So we have ended up to this part.
Now let's create the navbar-collapse section, that means the part
that will be, the part that will be descending down...
Now this time we are using another class which will be known as dropdown..
As we can see here that we have created these things.
List class dropdown.
We have to make it aligned..
So first of all press control + s, get back to your project and reload and you can see
that a drop down list has been produced over here but if you now
just press over here, you will see that nothing is working here.
Now if you just get back to your mobile responsive view and if you go ahead and click over here
you can see that nothing is working.
So this is the trouble that you will be facing in the first case when you will only create
some part of this, what is the additional task?
First of all let's concentrate on building up this menu bar.
This is a thing that we need to understand.
So here first we have created the container fluid and the respected div as
usual we have created a row and col-lg-12 and then we have introduced a div class which
will be navbar-default in nature and in this navbar-default menu bar we have
created a navbar-header.
As we have told you previously that a navbar-header is required.
So that is why this navbar-header has been created within which we have
specified a button type which will be button and its class will be navbar-toggle and it
will be a data-toggle collapse in nature data-target will be this one.
What is this?
This is practically the same class which will be defined over here.
You have Mentioned this class as navbar-collapse.
So this is the class that is getting used over
here and this class is specified as a target on which this collapse action will be occurring.
If you have to change the class name always remember to change the same class name over
here cause this is practically the class name that is being used over here,
as a data target for the collapse action.
In the next segment we have practically created these three items over here.
You see these three horizontal lines.
These three horizontal lines have been produced over here and this is the span class which
actually tells you about toggle-navigation that means it should, it is supposed to drop
down the list items accordingly on clicking it will be expanded.
And if expanded previously, on clicking it will be collapsed into this navbar-header.
Now I have mentioned a navbar-brand that means a
brand will be executed over here, and here you may specify your own image or you may
specify a glyph icon as I have placed here.
The next thing is this navbar-collapse.
As I have told you that this is the class that is being targeted over here for this
collapse action, and then we have specified that navbar-nav will
be coming in action for a ul class and under this ul we have created our list items among
who is the first one is the active, is using the active class which is
practically home here.
And then we have mentioned two other list items and then we have mentioned a dropdown
option that means in this particular case this
portfolio, it will be consisting of a dropdown action, it will be having some sub menus inside
it and on clicking the span class caret over here, that means this..
Press Control + shift + m, get back to your desktop preview and if you see over here there
is an icon beside this portfolio word and if you click over here then all
this sub items should descend down which is not being occurring here at the present moment.
So this is the thing that we should practically concentrate on why it is not working.
So that is why we are now copying this URL, and I am opening it with our
Google Chrome.
Here it is.
And now if I press F12 and here you can see that practically one error is being executed
over here.
So if you click on to it you can see that it is stating us uncaught error.
Bootstrap's JavaScript requires jQuery.
That means you will be requiring another jQuery prior to this bootstrap's JavaScript that
is being used over here, here it is, bootstrap.min.js, it will require another jQuery to be rendered
into the page in the first position before this JavaScript is being
rendered.
That's why if you we now get back to our project, jS folder, we see that this is the jQuery
1.11.1.min.js.
So this time we have a need of it.
Pressing F2, copying it as a whole, and..
Press control+s, and for clarification let's get back to our Google Chrome Browser and
here if we reload we can see that now the error is gone.
That means all of them will be working perfectly.
Practically uncaught error type is being executed at the
event when the required jQuery is not being executed on your page and that is why this
type of error will be executed as you have seen over there.
So now we are getting back to our Mozilla Firefox and here we Press Control+f5 and if
we click here then now we can see that everything is in action.
Now Press control + shift + M, get back to your mobile
responsive preview and if you now click on this icon over here you can see that a list
item is being generated over here but it consists the home list item only.
So what is the problem?
We should get back to our custom.css.
First of all check which div class is being used in this
particular case, we are using this banner6.
Get back to custom.css and here it is.
We were practically using a height.
So this is why height should always be avoided in case of bootstrap mobile responsiveness.
And we are going to off this height.
Press control + s, get back to your project, reload now you can see that all of these list
items are getting observed over here.
So we have successfully created a drop down list item, a drop down menu bar over here.
You may see that it is now collapsing or it is now expanding as you have seen.
That is why you have specified this particular word here, data-toggle collapse and the data
target being this one.
This is the data-target navbar-collapse.
This class is being used.
Now if you want your menu item will be fixed on to the top of this page, first of all remove
this margin-top.
Probably I have provided a margin-top over here, here it is.
We do not need any margin-top.
Get back to your project and reload and now you can see that there is no margin top.
Get back to index.html and here use this one.
Press Control + s, get back to your project and reload and you can now see that your menu
bar, it is now fixed to the top position.
Place it over here along with it.
Reload.
You see that it is now back in position and it is working perfectly.
If you do not wish to use it then do not.
Just press control + s, get back to your project and reload and you can see that the
navbar-default and the navbar-fixed is practically working together.
Another thing, get back to your mobile responsive preview.
Here if you want to change this glyphicon over here now all you need to do just get
back over here, remove all those things, all these classes over here, just Chalk it
down as div class...
These are the available glyphs as you can see.
You may use this one or you may use this one, whatever you use just copy the name paste
it over here, reload and you can see that the same glyph icon is working.
So if you click on over here you may see that are list items are working properly.
So this is the thing you may want here.
In the same manner if you want to have a navbar-fixed bottom then all you have to do you have to
just change it to bottom, get back to your project reload and
you can see that this thing is now into the bottom area of your web page.
Press control + shift + m, get back to your normal preview and you can see that it is
now working in to the bottom area.
So this is in sort the HTML menu bar item that means you are now able to create a drop
down menu in case of a bootstrap framework.
Now I have detailed about the customization all these things how to make customization.
So use your wisdom and try to change all these things,all these individuals
as I have changed over here.
In this active case it is practically showing another background colour then the default
one and over here we may see that a transition is working.
Practically it is now getting a yellow colored background as you are observing here.
So these are the changes that you need to make.
So this is it for today's tutorial.
Hope you guys have liked this video tutorial.
If you guys have like this tutorial then do not hesitate to hit that red subscribe
button.
Hope to see you guys in our next tutorial till then, bye..
For more infomation >> Die besten Third Person Shooter! | feat. Ultralativ - Duration: 5:04. 
For more infomation >> Angel Nieto | LA REINA DE ÁNGEL NIETO: LA VIDA DE BELINDA - Duration: 6:07. 
For more infomation >> Paulinho | Gabriel Rufián se mofa del fichaje de Paulinho por el Barça - Duration: 2:05. 
For more infomation >> Как помочь мужу добиться успеха | Как поддержать мужчину - Duration: 5:13. 
Không có nhận xét nào:
Đăng nhận xét