Тёмный

CSS3 Tutorial: Create a Modern And Minimal CSS3 DropDown Navigation Menu 

1stWebDesigner
Подписаться 58 тыс.
Просмотров 40 тыс.
50% 1

Today we will be creating a modern and clean CSS3 navigation dropdown menu from scratch. It is extremely easy to do, so don’t be scared.
The video is a bit longer, it runs for about 40 minutes, this is because I have gone into great detail explaining the process so that everyone will understand all of the properties. Once you are able to do it on your own, 10-15 minutes should be enough for you to go through the necessary coding and create this dropdown menu.
We used to have to create dropdown menus with JavaScript, but today we only need to use CSS3. CSS3 loads faster than JavaScript, which is one of the many benefits of using CSS3 menus. However, because there is no dropdown function on mobile from a design and usability perspective using a CSS3 dropdown menu would be a mistake.
View demo and download files as well as read additional comments about tutorial here:
www.1stwebdesigner.com/creatin...
-----
If you are enjoying these video series and are looking for more, we created The Ultimate 2015 Web Design Learning Course, where in 9 hours we will teach you how to Build Your Own WordPress Site - 100% Responsive & Flat - rockingcode.com/
You will learn how to build website from scratch in Photoshop, then convert PSD to HTML and CSS. Finally using Bootstrap magic, we will covert website to fully responsive and functional WordPress website.
We throw in some business lessons, interviews and many bonuses to amplify your learning and help you get some clients as well!
What you are waiting for? Take your skills to the next level right now with rockingcode.com/

Наука

Опубликовано:

 

19 мар 2013

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 34   
@conversano1977
@conversano1977 10 лет назад
Thank you so much!! I have been struggling for a while trying to teach myself these navigations in css by looking at other's examples, but it has always felt too complex and since so few people comment their css code it's just impossible to know what does what.. So thank you again, you really made a difference for me.
@DavidByrd1
@DavidByrd1 11 лет назад
Great job Christian. Appreciate your help. There's a couple tweaks I had to make it work on my page, and I have a couple more to squeeze together words that were separated by the shortness of the dropdown, but I couldn't have gotten near as close w/o your help.
@TheKel1st
@TheKel1st 11 лет назад
Very clear and concise tutorial, thanks for sharing!
@jemmialeo8013
@jemmialeo8013 9 лет назад
thank you a lot! simple and so clear to understand!
@LimitlessIdea
@LimitlessIdea 10 лет назад
Great stuff mate!
@Altaranalt
@Altaranalt 10 лет назад
Nice tutorial! Very helpful!
@mbb448
@mbb448 10 лет назад
Thank you. Great tutorial. Very informative.
@ms400011
@ms400011 11 лет назад
great, a very good demonstration to understand css3 and html5
@MadeInThailandMovies
@MadeInThailandMovies 11 лет назад
Thanks.. your tutorials are the best man! What I would like to see is how to combine some of these tutorials so we could make a fully functional website using all these cool tools.
@MarcelBariou
@MarcelBariou 10 лет назад
Thanks for your tutorial
@shifty830
@shifty830 10 лет назад
Cheers Christian for this great and awesome tutorial. Is there any chance of you doing a responsive multi level navigation bar tutorial.
@davedave9
@davedave9 11 лет назад
40 minutes for a simple dropdown menu, seems legit.
@AkhilKumar
@AkhilKumar 10 лет назад
Hey @Christian you r awweeeeesummmmmm!!
@Pokemalta
@Pokemalta 10 лет назад
hi i want to do one with 2 dropdowns but need the dropdown's differnent size can you help me do this pls? anyone
@omarthegreathedayat1080
@omarthegreathedayat1080 9 лет назад
when i added the class menu code in css it didn't work help me maybe because my ul is included in a table
@elegance81
@elegance81 9 лет назад
thank you..
@martijnwho6476
@martijnwho6476 10 лет назад
Why not use display: none; instead of opacity: 0; ? Anyone knows?
@rajuadla3820
@rajuadla3820 11 лет назад
how can i make it responsive and place into the demo browser we created in previous tutorial i'm waiting for you replay
@mpasr1
@mpasr1 11 лет назад
Please tell me how to add this menu to your previous vedio page about creating a responsive website using html5 and css3!!!
@george0700
@george0700 11 лет назад
hey Christian can I write my css3 code to textedit macbookPro please answer my question thank you so much an advance
@devdutt9281
@devdutt9281 10 лет назад
Thanks a lot Chris for this lovely tutorial. It was superb. I have one question. Will you please upload a tutorial on how to convert this menu to responsive dropdown menu. Either with or without Jquerry. Thanks in advance...
@DestInJhN
@DestInJhN 11 лет назад
thank u.
@rayram76
@rayram76 11 лет назад
what I am using is visibility:hidden; and visibility:visible; in css2 is that still ok in css3..?
@VirendraTilekar
@VirendraTilekar 11 лет назад
Thanks for the video Christian, i created a webpage with dropdown lists they work fine in mozilla and chrome but somehow they dont seem to work with Internet explorer any idea how to fix this?
@kalaatulee
@kalaatulee 11 лет назад
Thanks for the great tutorial! One question tho: How can i center the dropdown menu?
@DestInJhN
@DestInJhN 11 лет назад
nice tutorial. One question, why you set opacity to 0 instead of display:none to the child ul?
@davidmeade771
@davidmeade771 11 лет назад
Hi Christian, any chance you could demonstrate how to apply this to a Wordpress menu? I've been trying to do so without success.
@SteveThompson24
@SteveThompson24 11 лет назад
Great video! Question: How would you approach turning this menu into a responsive menu?
@JackMuliadi
@JackMuliadi 11 лет назад
Thanks a lot Chris for the tutorial. How about a sub-menu under sub-menu? Would it be using nested ul as well? For reference, marksandspencer website
@Jatinnandwana25
@Jatinnandwana25 7 лет назад
Hey this is an awesome video but i have a request from you can you please give the code to make it responsive..
@sivaguru750
@sivaguru750 11 лет назад
I followed your tutorial. i want to make my menu background as this website vithobaa.com. But the problem is i have only 3 menu items. So the menu back ground is not lengthy like that. What i have to do to make my menu background as lengthy like that. When i increase the menu width means it is not adjusting as responsive please help me
@andyrays
@andyrays 11 лет назад
Giving it opacity:0 let's you fade the menu in easily. Additionally, using display:none makes the content inaccessible to screen readers (for visually impaired people, for example). Read "Places It’s Tempting To Use Display: None; But Don’t" by Chris Coyier. on css-tricks
@marcelapach3580
@marcelapach3580 10 лет назад
I D LIKE CHRISTIAN!. THANKS!!
Далее
Викторина от МАМЫ 🆘 | WICSUR #shorts
00:58
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 145 тыс.
How I Coded An Entire Website Using ChatGPT
18:22
Просмотров 1,9 млн
HTML & CSS - Creating a dropdown navigation menu
19:48
Просмотров 361 тыс.
Cascading Drop-down Navigation Menu with CSS (Part 1)
14:58
Create a Responsive Website Using HTML5 and CSS3
1:06:30
Build any layout with tailwind | crash course
34:28
Просмотров 59 тыс.
The latest in Web UI (Google I/O ‘24)
45:47
Просмотров 173 тыс.