Hover effect dropdown Menu using CSS in Urdu/Hindi

Web Artificer

in this tutorial it is shown how hover effect drop-down menu designed using CSS, providing an intuitive and visually appealing navigation experience. The menu enhances user interaction by smoothly revealing sub-menu items upon hovering, ensuring easy access to various sections of a website.  #hover #dropdown #menu #css #webartificer1

Transcript

00:00Assalam-o-Alaikum

00:02Today we will see a small project in our video

00:06It is related to drop-down list

00:09Often you see that

00:11In website

00:12As soon as you hover over any option

00:16A whole list comes down as a drop-down

00:20So today we will make that in our project

00:23First of all, we take a div

00:27And we give a clause to this div

00:32In the name of drop-down

00:35drop-down

00:38And we take an h2 in it

00:46We take h3

00:48And we write in it

00:50ignore options

00:56And we take another div

01:01And we give a clause to it

01:07drop-down-content

01:12Whichever drop-down-content comes

01:15It will come in it

01:17So first of all, we give something in it

01:21Our text

01:24For example, we use anchor text

01:27Anchor text is more preferable

01:29Because there are no links in it

01:34We give multiple options in it

01:37So now we want to give

01:40option

01:41or

01:42option1

01:44and sets

01:46And we give a clause to all of them

01:55In the name of options

01:58We gave a clause to all of them

02:01So let's see

02:04This is what we have

02:07So let's modify it a little

02:11drop-down

02:17Position relative to it

02:22And

02:25In the drop-down, we have h3

02:28We reduce the size of it

02:3216 pixels

02:34Power over

02:36Circular

02:38White color

02:41Background color is white

02:44Change

02:47Adding a color

02:49100 pixels from top

02:5112 pixels from side

02:54Or this one

02:59Solid

03:02Dynamic

03:09Square

03:1250 pixels

03:1550 pixels

03:18Return

03:2920 pixels

03:3560 pixels

03:37So this is what we have

03:40Let's go down and see

03:43our drop-down content

03:46In the drop-down content

03:49drop-down

03:52content

03:58We give it a position

04:00Absolute

04:03And

04:06Options

04:09Modify it a little

04:12Text decoration

04:15Name

04:18Color

04:21White

04:24Background color

04:27We give it a green color

04:30We give it a green color

04:3310 pixels

04:3610 pixels

04:39And

04:42This

04:5410 pixels

04:5710 pixels

05:000

05:030

05:060

05:090

05:120

05:150

05:180

05:210

05:240

05:27it is removed

05:29so now we call it

05:31power effect

05:33when our mouse goes over this link

05:35so

05:37our menu will be shown below

05:39apart from that

05:41note that the cursor

05:43we have text editor

05:45so we change it too

05:49cursor pointer

05:53we add it too

05:55cursor pointer

05:57so when our

05:59drop down

06:01hover over

06:03dot drop down

06:05hover over

06:07what it is displaying

06:09drop down

06:11penalty

06:13drop down content

06:15display

06:17cloud

06:19so that is all

06:21then

06:23you see

06:25when we hover our mouse over it

06:27so it will show us

06:29options

06:31so we make some changes

06:33in it

06:37margin top

06:39minus 10

06:41pixels

06:53so that is all

06:55so that is all

06:57so that is all

06:59so that is all

07:01so that is all

07:03so that is all

07:05so that is all

07:07so that is all

07:09so that is all

07:11so that is all

07:13so that is all

07:15so that is all

07:17so that is all

07:19so that is all

07:21so that is all

07:23so that is all

07:25so that is all

07:27so that is all

07:29so that is all

07:31so that is all

07:33so that is all

07:35so that is all

07:37so that is all

07:39so that is all

07:41so that is all

07:43so that is all

07:45so that is all

07:47so that is all

07:49so that is all

07:51so that is all

07:53so that is all

07:55so that is all

07:57so that is all

07:59so that is all

08:01so that is all

08:03so that is all

08:05so that is all

08:07so that is all

08:09so that is all

08:11so that is all

08:13so that is all

08:15so that is all

08:17so that is all

08:19so that is all

08:21so that is all

08:23so that is all

08:25so that is all

08:27so that is all

08:29so that is all

08:31so that is all

08:33so that is all

08:35so that is all

08:37so that is all

08:39so that is all

08:41so that is all

08:43so that is all

08:45so that is all

08:47so that is all

08:49so that is all

08:51so that is all

08:53so that is all

08:55so that is all

08:57so that is all

08:59so that is all

09:01so that is all

09:03so that is all

09:05so that is all

09:07so that is all

09:09so that is all

09:11so that is all

Category

Transcript

Recommended