In this tutorial we are going to learn a new thing, inserting a menu into your flexbox
element.
There it goes.
You can see that all menu list items those are aligned into the
central position of this webpage, and on the other hand you can see that on Mouse
hovering they are just changing into a different background color.
And if you press control + shift + m and get back to the mobile
responsive view, you can see that at the lowest possible dimension of display, all
those menu items those are now aligned into the extreme left and they are having practically
a whole block, the whole width as you can observe over here.
So this is the thing that we are going to learn in this tutorial,
so stay tuned.
[Music intro..]
Hello and welcome to another new episode of learning simplified.
Now we have to create this menu as we can see here and we have to
create it into our project on which we are currently working on.
So in doing so the first thing that we will be doing here - get
back to stylesheet.CSS and here create new class.
Everything will be done in the same order as we have done previously.
So I am creating a class name 'menu' and here I am
creating padding:10px and here I am providing the list style to none such as there won't
be any bulleted style format present here.
And then all we are doing we are just creating an ul list class but we are not mentioning
any property of it, we are not providing any particular attribute over here,
but just create it.
Now here we will be now creating the property of anchor tag over
here..
Text decoration will be none, such as there won't be any underline.
And then there we are creating the color, for say in
the first case we are not providing any padding property over here.
All we are doing we are pressing control + s, and getting back
to index.HTML where we are creating, as we have discussed earlier that this menu shall
appear at the top of every other contents to
your web page; so that is why all we need to do, we need to call this class name here
and now all we have to do we have to create an
unordered list first, and then we have to create all those list items inside.
Everything that was discussed in our previous tutorial for reference, you may go behind
and watch How to create horizontal menu as we
have discussed all those technique to create the horizontal menu.
Now we have created an unordered list inside this div class 'menu' where 5 list items
have been introduced and we have created the corresponding stylesheet over here; this
menu class is defined and all those sort of things have been defined over here.
So now we Press control+S and get back to our project
and reload and now we can see that everything inside is alright, no problem with
it.
Now as we can see we haven't declared any kind of 'float' property over here inside
this list item as we did previously, instead we just left it alone we just left
it empty and here we can see that this menu item is now getting vertically listed.
Now if we do not provide this one, list style none, just reload and you can see that
these bulleted formats are appearing over here.
So to avoid these kind of bulleted formats it is practically the default value,
we are declaring here list style none.
Now just reload and you can see that all those bulleted formats are gone.
Now we have to make the amendments all over here.
Provide a background color.
You may choose your own background color with the aid of a graphics
editor as I am doing here.
Provide the hashtag always.
Reload.
Now it is almost done over here.
Now the question is as we can see we have to make it horizontal.
As we can see that all those menu items those menu items are practically
horizontal in nature but these of vertical.
Now in this particular case we making something more tricky over here, we are
practically targeting this media query, we are copying this menu ul from here, pasting
It Inside, and here we are stating 'display flex'.
So the display is flex in this particular case.
Now if we just press control + s, and get back to our project and
reload, we can see those menu items, those are practically getting horizontal, without
any kind of float attribute as we have done previously and as we did previously and
there is no presence of float left option over here, instead we have stated that at
minimum width of 768px, menu ul, it will be having a display flex option.
Now if we get back to our project and press Control + shift + m, and can see that at a
lower resolution, at a lower dimension, all those menu items those are getting
vertically stacked on each other, but in case of larger device preview if you just get
back over here we can see that those things are not getting horizontally aligned.
Now the rest of the things those you can do over
here the amendments, those are to be made...
We are providing a particular padding of, for say, margin property over here,
for say, 10px of either ends, that is, from the left end and from the right end.
Now this is the syntax that I have used here.
Now get back and reload and we can see that this is practically living a constant gap
of 10px of margin from both the ends; from left end and from right end.
But this is not a very suitable method if you are talking about a mobile responsiveness
over here.
So instead of providing such a margin, now we will be playing another trick
over here.
Now instead of doing anything else here first of all that you have to do you
have to mention this display block option here.
That is why in lower resolution if you encounter this kind of serious trouble like
those things are not getting proper view, now if you reload you can see that everything
is now present at its own style.
Everything is now present inside.
This is the amendment, the first thing that is needed
to do over here.
Now in this particular case, if we now inspect our earlier cases, we can see that we
have used a justified contained attribute.
Now this justify content attribute only works in the scenario when you are using display
flex to the parent div.
As you have used this display flex in a minimum width of 768px,
that means you have to use it over here.
In the first case if we use space around, press
control + s, get back to your project and reload, and you can see that all of your contents,
those are now practically spaced around, those are now practically leaving
equal spaces from both the ends, and they are
leaving equal gaps in between.
That means you don't have to worry about anything.
Now if instead of justify content of space around,
if we use here space-between, you know the drill quite well.
Reload and you can see that all of them are now equally spaced evenly.
But this is not the actual thing that we wish to have.
That is why we need to get back to our project and here, instead of using all
those attributes like space-around or space-between, we are using here center.
So if we use center and now if we reload, we
can see that everything is more concentrated into the central position.
And if you Press control + shift +M, you can see that instead
of Central alignment, it is now aligning into the extreme left of your webpage in case
of smaller display device width.
Now the rest of the things you know the drill all you have to do you have to create some
hovering menu item...
For say we are having a little bit of darker color over here.
Now just reload and you can see that it is in
action.
Here in this size this is already in action; background is getting changed due
to this hover color and there is a stiff padding.
So that is how you can create a menu inside your flexbox item.
Now Press control + shift + m and place here 767px.
You can see that still these menu items these are getting
vertically stacked down but if you provide 768px, now we can see that it is now
centrally aligned and it is changing its background.
So in this particular case there is no need of this menu ul list item.
So we can easily discard it off.
We are discarding it.
Now this is what we need to know, we needed to know from this tutorial.
We can do a lot of experiment with it.
So that's all for today's tutorial.
Hope you guys have liked it.
If you guys have liked this tutorial then do not hesitate to hit that Red subscribe
button down below.
Hope to see you guys in our next tutorial.
Till then, bye.
For more infomation >> Bertín Osborne y Arévalo distanciados por culpa del Rey Juan Carlos - Duration: 3:53. 
For more infomation >> PARTE 2. La solución de Unidos Podemos: un referéndum en Cataluña pactado y con garantías - Duration: 1:53. 
For more infomation >> Herramienta de Cotas en CorelDraw X8 - Duration: 8:58. 
For more infomation >> DIA DE LAS ESCRITORAS 2017 BIBLIOTECA MUNICIPAL DE RENEDO DE ESGUEVA - María Etxabe - Duration: 2:15. 
For more infomation >> Bien Dormir "Ça a tout changé ! " : Fanny, 32 ans. - Duration: 3:48. 
For more infomation >> Vaincre l'insomnie : la voie la plus rapide, tout naturellement ! - Duration: 3:27. 
For more infomation >> Insomnie solution : 2 mots très amis ! - Duration: 3:33. 
For more infomation >> TwitchCon event will be strea...
For more infomation >> Nemi identitás: Mi okozza ezt a sok zavart? - Duration: 4:49. 
For more infomation >> BMW X5 sDrive25dA Centennial Executive, met leder, adaptief onderstel comfort en driving assistent p - Duration: 1:01. 
For more infomation >> 【ナルト疾風伝】19話『プロローグ~波の国』「ザブザ雪に散る…」 - Duration: 17:21. 
For more infomation >> BXH FIFA tháng 10/2017: ĐT Việt Nam bứt phá, bỏ xa Thái Lan - Duration: 2:33. 
For more infomation >> Peugeot 208 1.2 VTI 82 PK 5-DEURS LAGE KILOMETERSTAND - Duration: 0:54. 
For more infomation >> Entertainment News 247 - ［コラム］中盤起用の遠藤航、リオ経由ロシア行き実現へ「経験値を上げていく」 - Duration: 8:01. 
For more infomation >> Tim Schafer: i suoi consigli per gli sviluppatori indie [Sub Ita] - Duration: 3:09. 
For more infomation >> Citroën Xsara Picasso 1.6i-16V Caractère - Duration: 0:47. 
For more infomation >> Seat Arosa 1.4I STELLA 14" ST.BEKR. 104DKM - Duration: 0:52. 
For more infomation >> Honda CR-V 2.0I Executive Leder-Navigatie-Trekhaak - Duration: 1:03. 
For more infomation >> Subaru XV 2.0i Luxury Plus AWD AUTOMAAT! 1e eigenaar! dealer onderhouden! navigatie! - Duration: 0:54. 
For more infomation >> Hyundai i10 1.0I 5-DRS AUTOMAAT | CLIMATE CONTR | LAGE KM STAND! | *VERWACHT - Duration: 0:54. 
For more infomation >> Honda Accord 2.0i Special Edition 17 Inch NL Auto NAP - Duration: 0:43. 
For more infomation >> Doki Doki Literature Club | Chilled-Out Game Reviews Halloween Special - Duration: 1:49. 
For more infomation >> Pereira gives perfect response to criticism from Mourinho with brilliant goal - Duration: 2:03. 
For more infomation >> 용산에서 사망사고가 일어났네요 - Duration: 4:34. 
For more infomation >> LAWRENCE KRAUSS y JUAN L. ARSUAGA Orígenes y mitos - Duration: 2:15:31. 
For more infomation >> Revilla, pillado: descubren que manipuló una charla con Rajoy para armar bronca - Duration: 5:01. 
For more infomation >> 2017-10-16: Minuta s XTB - Duration: 1:01. 
For more infomation >> Episode 4 - Duration: 43:04. 
No comments:
Post a Comment