Professional hover Dropdown Menu Using Pure html & Css Within 22 Minutes
Hi Friends,
I am Jeykumar M,
I am the co-founder, member of w3farmers
and Web frontend / UI / UX Designer and Developer at w3farmers.
w3farmers channel is giving you a videos of landing (welcome) page, website design and development, website sections like top and side navbars (fixed navbar, transparent navbar, animated navbars, responsive navbars), dropdown menu using only css, and javascript, testimonials, login pages, contact pages, blog pages design and development, image slider or slideshow or carousels, and css tips tricks and techniques, responsive web design, boostrap, font-awesome, google fonts, jquery and more stuffs....
We gives you a series of web ( Website Or Webpage ) design and development tutorials for free, landing (
Welcome ) pages design, Website ( Webpage ) Design basics has been going now,
Today, i described you "How To Create Professional Dropdown Menu When Hovering Over The Button Using
Pure CSS & HTML Within 22 Minutes".
from this video series you can learn basic, intermediate and advanced level html, css, some css transition
animation ( transition-duration, transition-delay, transition-timing-function and etc ) , button hover effects,
background images using background url method, transparent backgrounds, relative and absolute
positioning,floating elements in navbar menu, navbar creation, responsive design, css percentage units and pixel
units, css z-index, css transform, css before and after pseudo elements, how to create dropdown-menu, and
how to create caret symbol (triangle shape ), how to create a dropdown menu with caret symbol, how to join the
caret symbol to dropdown menu, css visibility : hidden and visibility : visible properties, css opacity property and it's
values, :hover pseudo class, border-radius properties and it's values, css border properties, css background
properties and its values, css box-shadow property, css flex layout ( display:flex ) , and how to centering
elements horzontally and vertically using flex layout and css transform and translate property and more stuffs...
steps to do this,
1. open the texteditor as you wish ( Brackets, Visual Studio Code, Sublime Text, Atom such a popular text editors
), i am using in this video is brackets text editor.
2. first create a page with .html extension,
3. create a html elements like html, head, body, div ( .dropdown-menu ), a ( .dropdown-toggle ), ul ( .dropdown-
menu ), and li tags.
4. now styling, begins, we are using internal styling ( within the style tag ). first html, body have 100% width to take
the device's 100% width and height. when, give 100% to the body, the scroll in y-axis appears, because body
have default margin of some pixels, so, put the margin 0 to the body element. for my compatiblity, i want to center
the dorpdown menu both horizontally and vertically. so, i am using display flex, align-itemns center to vertiaclly
center, justify-content:center to horizontal centering.
5. now, .dropdown-toggle styling, in here, i just put background:#ff2474 ( its a hexadecimal-code for dark pink
color ), text color to #fff ( for white ), padding:10px 30px ( top bottom 10px, right left 30px ), position to relative
because of hover effect ( .doprdown-toggle:before would be absolute ), border-radius:50px for rounded corners,
6..dropdown-toggle:before styling, initially, height and width to 0%, and top:50%, left:50%,transform:translate(-
50%, -50%) to cenering the within the dropdown-toggle, and .3s ( 300 milli seconds )
7. .dropdown-menu styling, i just put ul have defaultly, some margin, padding and bullets, so, i remove margin (
margin:0 ) and bullets ( list-style-type:none ) and remove padding right and left, and give top and bottom to 10px
( padding:10px 0 ), i should be relative positioning bacause its before and after used for caret symbol so that
would have absolute positioning. and dropdown menu initially, hidden with the properties visibility:hidden and
opacity:0; when hovering the dropdown element, it changes to visibility:visible and opacity:1;
8. caret creation with .dropdown-menu:before and .dropdown-menu:after.
first, it should be absolute positioning, left:10px, and border:10px solid transparent and border-top:0,
.dropdown-menu:before, with color #fff top:-8px and .dropdown-menu:after have color that is the border color
color of dropdown-menu, because after looks the border of the before element.
9. li have padding 10px, color: #343434 ( darkgrey ), a and li have common properties they are, font-size :14px
and font-weight:bold,
to follow us on facebook like our page,
/ w3farmers
/ computerteche
#w3farmers_landing_pages
#w3farmers_css_practices
Any Queries please give it on the comment box below!
Смотрите видео Professional hover Dropdown Menu Using Pure html & Css Within 22 Minutes онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь W3Farmers Webtuts 04 Октябрь 2018, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,230 раз и оно понравилось 77 людям.