title
Pure CSS Dropdown Navigation Bar (Improved)

description
Want more? Explore the library at https://www.codecourse.com/lessons Official site https://www.codecourse.com Twitter https://twitter.com/teamcodecourse

detail
{'title': 'Pure CSS Dropdown Navigation Bar (Improved)', 'heatmap': [{'end': 245.989, 'start': 220.915, 'weight': 1}, {'end': 364.18, 'start': 336.409, 'weight': 0.856}, {'end': 437.658, 'start': 419.665, 'weight': 0.72}, {'end': 689.199, 'start': 651.843, 'weight': 0.728}, {'end': 900.341, 'start': 871.748, 'weight': 0.746}, {'end': 946.453, 'start': 918.773, 'weight': 0.813}, {'end': 1050.857, 'start': 1032.605, 'weight': 0.731}], 'summary': 'Demonstrates building a pure css two-tier drop-down navigation with hover effect and click functionality, styling a website by linking to global.css and google fonts api, creating navigation elements and list items with anchors, and creating a css-only dropdown navigation without using javascript for enhanced user experience and aesthetic appeal.', 'chapters': [{'end': 43.163, 'segs': [{'end': 43.163, 'src': 'embed', 'start': 0.532, 'weight': 0, 'content': [{'end': 5.155, 'text': "In this video, we're going to build a pure CSS drop-down navigation.", 'start': 0.532, 'duration': 4.623}, {'end': 11.759, 'text': "So at the top of the screen, you can see that we've got these options, much like you'd see on a website.", 'start': 5.895, 'duration': 5.864}, {'end': 14.92, 'text': 'But when I click these, we get a drop-down.', 'start': 12.819, 'duration': 2.101}, {'end': 18.562, 'text': 'So we have a sort of two-tier drop-down system.', 'start': 15.181, 'duration': 3.381}, {'end': 22.165, 'text': 'Now, this is all done using pure CSS.', 'start': 19.063, 'duration': 3.102}, {'end': 27.808, 'text': "So we've obviously got the hover effect, which you can imagine is pretty straightforward using CSS.", 'start': 22.765, 'duration': 5.043}, {'end': 33.653, 'text': 'But the fact that we can click this, drop this down, move our mouse around and then, when we want to dismiss it,', 'start': 28.468, 'duration': 5.185}, {'end': 36.877, 'text': 'we can click anywhere else on the page, and that will just disappear.', 'start': 33.653, 'duration': 3.224}, {'end': 43.163, 'text': 'So this acts exactly like you would find a normal JavaScript solution to this.', 'start': 36.937, 'duration': 6.226}], 'summary': 'Building a pure css drop-down navigation with two-tier system and click functionality.', 'duration': 42.631, 'max_score': 0.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk532.jpg'}], 'start': 0.532, 'title': 'Pure css drop-down navigation', 'summary': 'Demonstrates building a pure css drop-down navigation with a two-tier system, hover effect, click functionality, and provides a javascript-like solution.', 'chapters': [{'end': 43.163, 'start': 0.532, 'title': 'Pure css drop-down navigation', 'summary': 'Demonstrates building a pure css drop-down navigation with a two-tier system, hover effect, and click functionality, providing a javascript-like solution.', 'duration': 42.631, 'highlights': ['The drop-down navigation features a two-tier system, providing a more dynamic user experience.', 'The hover effect and click functionality are achieved using pure CSS, showcasing the power and flexibility of CSS for interactive web design.', 'The drop-down can be dismissed by clicking anywhere else on the page, simulating a normal JavaScript solution.']}], 'duration': 42.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk532.jpg', 'highlights': ['The drop-down navigation features a two-tier system, providing a more dynamic user experience.', 'The hover effect and click functionality are achieved using pure CSS, showcasing the power and flexibility of CSS for interactive web design.', 'The drop-down can be dismissed by clicking anywhere else on the page, simulating a normal JavaScript solution.']}, {'end': 617.707, 'segs': [{'end': 81.294, 'src': 'embed', 'start': 44.024, 'weight': 0, 'content': [{'end': 50.15, 'text': "Let's go ahead and build up the styling for this, and then we'll look at how we get this nice functionality to drop down.", 'start': 44.024, 'duration': 6.126}, {'end': 55.072, 'text': "All right, so we're not starting off with too much code at all.", 'start': 51.789, 'duration': 3.283}, {'end': 56.733, 'text': 'This is a pretty blank document.', 'start': 55.112, 'duration': 1.621}, {'end': 62.378, 'text': 'The only two things I have done is obviously laid my document out with an HTML5 doc type.', 'start': 57.294, 'duration': 5.084}, {'end': 68.183, 'text': "And I've linked in this global.css stylesheet, which is within this CSS folder just here.", 'start': 62.938, 'duration': 5.245}, {'end': 72.626, 'text': "And that's obviously empty because we're going to be writing everything from scratch here.", 'start': 69.163, 'duration': 3.463}, {'end': 81.294, 'text': "The second thing I've done is I've linked in a style sheet from Google Fonts API, which provides me with a font of my choice really easily.", 'start': 73.367, 'duration': 7.927}], 'summary': 'Starting with minimal code, linking global.css and google fonts api stylesheet for styling.', 'duration': 37.27, 'max_score': 44.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk44024.jpg'}, {'end': 138.891, 'src': 'embed', 'start': 98.006, 'weight': 2, 'content': [{'end': 103.049, 'text': "We're going to take a look at how this is structured, start to make it look nice and then add the functionality at the end,", 'start': 98.006, 'duration': 5.043}, {'end': 106.571, 'text': 'including the nice transitions and, obviously, the ability to click.', 'start': 103.049, 'duration': 3.522}, {'end': 109.192, 'text': 'So we need to define our navigation.', 'start': 107.611, 'duration': 1.581}, {'end': 112.294, 'text': "For this, I'm just going to create an empty nav element.", 'start': 109.292, 'duration': 3.002}, {'end': 117.197, 'text': "And I'm going to give this a class of nav main, just so we can target that with CSS.", 'start': 112.714, 'duration': 4.483}, {'end': 122.88, 'text': "Now, you can include a logo of your choice, whatever you're doing here.", 'start': 118.337, 'duration': 4.543}, {'end': 129.624, 'text': "But in this case, just to speed things up, I'm going to create just some text within a div, and that has a class of logo.", 'start': 123.32, 'duration': 6.304}, {'end': 136.369, 'text': "Now, each of the navigation items we're going to add at the top of the page are going to be contained within an unordered list.", 'start': 130.544, 'duration': 5.825}, {'end': 138.891, 'text': 'So this just gives us the following.', 'start': 137.029, 'duration': 1.862}], 'summary': 'Structuring and styling navigation elements with css for website functionality.', 'duration': 40.885, 'max_score': 98.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk98006.jpg'}, {'end': 250.37, 'src': 'heatmap', 'start': 220.915, 'weight': 1, 'content': [{'end': 224.257, 'text': "But let's add some content onto the page just so we can see how this reacts.", 'start': 220.915, 'duration': 3.342}, {'end': 226.619, 'text': "I'm just going to add a div here with a class of content.", 'start': 224.297, 'duration': 2.322}, {'end': 234.645, 'text': "And I'm going to generate, I don't know, three or four paragraphs of Lorem Ipsum just so we've got something on the page that we can work with.", 'start': 227.16, 'duration': 7.485}, {'end': 237.607, 'text': "Okay, so let's start styling this up.", 'start': 235.886, 'duration': 1.721}, {'end': 239.287, 'text': "We'll start to style up the nav main.", 'start': 237.647, 'duration': 1.64}, {'end': 245.989, 'text': "We'll style up the logo, the unordered list here and each of the items within this just so it looks a little bit nicer.", 'start': 239.567, 'duration': 6.422}, {'end': 250.37, 'text': 'The first thing I want to do is I want to change the font on the page.', 'start': 246.689, 'duration': 3.681}], 'summary': 'Styling the web page by adding content and changing font.', 'duration': 29.455, 'max_score': 220.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk220915.jpg'}, {'end': 342.673, 'src': 'embed', 'start': 310.425, 'weight': 4, 'content': [{'end': 313.128, 'text': "So nav main, I'm going to target the logo.", 'start': 310.425, 'duration': 2.703}, {'end': 315.471, 'text': "You don't obviously need to include it inside of nav main.", 'start': 313.168, 'duration': 2.303}, {'end': 317.554, 'text': 'You could just have logo like that.', 'start': 315.511, 'duration': 2.043}, {'end': 321.078, 'text': 'And for this, we want to float this left.', 'start': 318.535, 'duration': 2.543}, {'end': 323.901, 'text': "We're also going to be floating that unordered list left as well.", 'start': 321.138, 'duration': 2.763}, {'end': 329.545, 'text': "We're going to give this a height of 40 pixels, and we're going to give this a bit of padding.", 'start': 324.802, 'duration': 4.743}, {'end': 335.649, 'text': "So we're going to do 15 pixels on the top and the bottom, and 30 pixels on the left and the right.", 'start': 329.865, 'duration': 5.784}, {'end': 342.673, 'text': "And we're going to give this a slightly larger font size than the rest of the content, just so it stands out.", 'start': 336.409, 'duration': 6.264}], 'summary': 'Styling the logo and unordered list by floating left, setting height to 40px, and adding padding.', 'duration': 32.248, 'max_score': 310.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk310425.jpg'}, {'end': 364.18, 'src': 'heatmap', 'start': 336.409, 'weight': 0.856, 'content': [{'end': 342.673, 'text': "And we're going to give this a slightly larger font size than the rest of the content, just so it stands out.", 'start': 336.409, 'duration': 6.264}, {'end': 346.354, 'text': "And we're also going to give this a line height of 40 pixels.", 'start': 343.433, 'duration': 2.921}, {'end': 349.815, 'text': "That just means it's going to sit central here.", 'start': 346.394, 'duration': 3.421}, {'end': 352.956, 'text': "You might have noticed that we've got this gap at the top here.", 'start': 350.675, 'duration': 2.281}, {'end': 360.399, 'text': 'If we just right click and inspect element on this unordered list, you can see it comes with some default padding and margin.', 'start': 353.176, 'duration': 7.223}, {'end': 364.18, 'text': "That's the orange and the slightly green bit that you see towards the left of that.", 'start': 360.419, 'duration': 3.761}], 'summary': 'Styling includes larger font size, 40px line height, and default padding and margin.', 'duration': 27.771, 'max_score': 336.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk336409.jpg'}, {'end': 450.885, 'src': 'heatmap', 'start': 419.665, 'weight': 5, 'content': [{'end': 420.585, 'text': "We'll float that left.", 'start': 419.665, 'duration': 0.92}, {'end': 424.448, 'text': "So you'll now see these just sat next to each other.", 'start': 421.586, 'duration': 2.862}, {'end': 431.135, 'text': "So now we've got the freedom to target that nav item class that we gave to each of our anchors.", 'start': 425.612, 'duration': 5.523}, {'end': 437.658, 'text': "We're styling up the anchor because this is going to give us the widest area for a user to hover and click.", 'start': 431.255, 'duration': 6.403}, {'end': 440.239, 'text': "We don't want to style up the actual list item.", 'start': 438.138, 'duration': 2.101}, {'end': 442.52, 'text': 'We are going to be putting some more content in here as well.', 'start': 440.319, 'duration': 2.201}, {'end': 447.403, 'text': "So it's a good idea to target the anchors, and that just means that's the clickable area for the user.", 'start': 443.021, 'duration': 4.382}, {'end': 450.885, 'text': 'So these are going to be a display of inline block.', 'start': 448.263, 'duration': 2.622}], 'summary': 'Styling anchors for widest hover and click area, using inline block display.', 'duration': 31.22, 'max_score': 419.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk419665.jpg'}], 'start': 44.024, 'title': 'Building and styling a website', 'summary': 'Covers building styling and adding functionality to a web page, starting with minimal code and linking to global.css and google fonts api, then creating navigation elements and list items with anchors for links. it also covers the process of styling website navigation using css, including the adjustments made to the layout and design of the website, specific css properties applied, and the rationale behind the styling choices to enhance user experience and aesthetic appeal.', 'chapters': [{'end': 177.974, 'start': 44.024, 'title': 'Building styling and adding functionality', 'summary': 'Covers building styling and adding functionality to a web page, starting with minimal code and linking to global.css and google fonts api, then creating navigation elements and list items with anchors for links.', 'duration': 133.95, 'highlights': ['The chapter covers building styling and adding functionality to a web page It includes creating the structure and styling for a web page, as well as adding functionality such as transitions and clickability.', 'Starting with minimal code and linking to global.css and Google Fonts API The document begins with minimal code, including an HTML5 doctype and linking to an empty global.css stylesheet and a Google Fonts API for font selection.', 'Creating navigation elements and list items with anchors for links The process involves defining a navigation with a class, creating a logo, adding unordered list items with anchors, and styling the navigation elements.']}, {'end': 617.707, 'start': 179.492, 'title': 'Styling website navigation with css', 'summary': 'Covers the process of styling website navigation using css, including the adjustments made to the layout and design of the website, the specific css properties applied, and the rationale behind the styling choices to enhance user experience and aesthetic appeal.', 'duration': 438.215, 'highlights': ['The process of styling up the nav main, logo, and unordered list using CSS properties like font size, padding, and background color. The chapter begins by demonstrating the process of styling the navigation menu, logo, and unordered list using CSS properties such as font size, padding, and background color to enhance the visual appeal of the website.', 'The use of CSS to float the logo and unordered list, adjust their height and padding, and eliminate default margin and padding. CSS is utilized to float the logo and unordered list, modify their height and padding, and remove default margin and padding for a more customized layout and spacing.', 'Styling the anchor elements within the navigation using CSS properties like display, padding, height, and text color to ensure a user-friendly and visually appealing navigation experience. The chapter explains the application of CSS properties to style the anchor elements within the navigation, including display, padding, height, and text color, to create a user-friendly and visually appealing navigation experience.', 'Creating transitions and effects for the navigation content using CSS, including setting up div elements and applying maximum height to achieve a smoothly animated dropdown effect. The process of creating transitions and effects for the navigation content using CSS is detailed, involving the setup of div elements and the application of maximum height to achieve a smoothly animated dropdown effect.']}], 'duration': 573.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk44024.jpg', 'highlights': ['The chapter covers building styling and adding functionality to a web page, including transitions and clickability.', 'Starting with minimal code, linking to global.css, and Google Fonts API for font selection.', 'Creating navigation elements and list items with anchors for links.', 'Demonstrating the process of styling navigation menu, logo, and unordered list using CSS properties.', 'Utilizing CSS to float the logo and unordered list, adjust their height and padding, and eliminate default margin and padding.', 'Applying CSS properties to style anchor elements within the navigation for a user-friendly experience.', 'Detailing the process of creating transitions and effects for the navigation content using CSS.']}, {'end': 1163.918, 'segs': [{'end': 644.317, 'src': 'embed', 'start': 617.768, 'weight': 5, 'content': [{'end': 622.649, 'text': "So we're adding a little bit of extra markup just so we can achieve this effect a little bit easier.", 'start': 617.768, 'duration': 4.881}, {'end': 626.41, 'text': "There are other ways around this, but we'll stick to the easiest way for now.", 'start': 623.209, 'duration': 3.201}, {'end': 634.306, 'text': "So inside of this, then, we're going to create more unordered lists and list items of just literally sub-navigation.", 'start': 627.799, 'duration': 6.507}, {'end': 636.849, 'text': 'So we can say anything about us.', 'start': 634.827, 'duration': 2.022}, {'end': 644.317, 'text': 'We can say, do you really care what is here? So something a bit longer.', 'start': 637.65, 'duration': 6.667}], 'summary': 'Adding markup for easier effect, creating sub-navigation with unordered lists.', 'duration': 26.549, 'max_score': 617.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk617768.jpg'}, {'end': 728.274, 'src': 'heatmap', 'start': 651.843, 'weight': 1, 'content': [{'end': 655.185, 'text': 'You can add literally anything you want inside of nav-content.', 'start': 651.843, 'duration': 3.342}, {'end': 660.107, 'text': "You can add text, you can add whatever you want, images, it really doesn't matter.", 'start': 655.225, 'duration': 4.882}, {'end': 667.54, 'text': "So I'm just going to say nav-sub here and I'm just going to say some text.", 'start': 660.568, 'duration': 6.972}, {'end': 669.181, 'text': 'So play around with this.', 'start': 667.56, 'duration': 1.621}, {'end': 673.285, 'text': 'Obviously, it will vary depending on what your site is.', 'start': 669.241, 'duration': 4.044}, {'end': 680.191, 'text': "But you can see here, we've got this kind of dropdown sitting next to each of these at the moment.", 'start': 673.865, 'duration': 6.326}, {'end': 683.894, 'text': "And it's pulling things away, but we're obviously going to fix that up with a bit of styling.", 'start': 680.671, 'duration': 3.223}, {'end': 689.199, 'text': 'And this text here is white, because remember, we gave a white foreground color to the whole of the navigation.', 'start': 684.275, 'duration': 4.924}, {'end': 693.583, 'text': "So let's start then with just styling up these nav content elements.", 'start': 690.6, 'duration': 2.983}, {'end': 695.686, 'text': 'So nav content.', 'start': 694.064, 'duration': 1.622}, {'end': 699.63, 'text': "And inside of here, what we're going to do is change the positioning.", 'start': 696.727, 'duration': 2.903}, {'end': 700.791, 'text': "So we're going to say position.", 'start': 699.69, 'duration': 1.101}, {'end': 702.754, 'text': 'We want this to be absolutely positioned.', 'start': 700.912, 'duration': 1.842}, {'end': 709.101, 'text': "The reason we're doing that is so we can position them properly so we don't get this kind of problem here.", 'start': 703.294, 'duration': 5.807}, {'end': 710.542, 'text': "So it's a little bit messy.", 'start': 709.201, 'duration': 1.341}, {'end': 716.786, 'text': "So I'm going to set the top to 70 pixels just so it sits nicely under our navigation element.", 'start': 711.343, 'duration': 5.443}, {'end': 721.189, 'text': "If you are adding borders to your navigation, you're going to need to increase this value.", 'start': 717.207, 'duration': 3.982}, {'end': 728.274, 'text': 'But otherwise, we just have a fixed 70 pixel height with no borders or anything like that or any padding on the actual element.', 'start': 721.87, 'duration': 6.404}], 'summary': 'Styling nav content with absolute positioning, adjusting top to 70 pixels for proper placement.', 'duration': 60.714, 'max_score': 651.843, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk651843.jpg'}, {'end': 857.812, 'src': 'embed', 'start': 829.586, 'weight': 4, 'content': [{'end': 832.51, 'text': 'So we apply the padding instead to that element within it.', 'start': 829.586, 'duration': 2.924}, {'end': 834.933, 'text': 'So we now have some nice padding in there.', 'start': 833.07, 'duration': 1.863}, {'end': 837.315, 'text': "Let's fix up these unordered lists.", 'start': 835.493, 'duration': 1.822}, {'end': 840.057, 'text': 'So nav sub unordered list.', 'start': 837.475, 'duration': 2.582}, {'end': 842.198, 'text': "And let's get rid of the padding.", 'start': 840.717, 'duration': 1.481}, {'end': 844.16, 'text': "Let's get rid of the margin.", 'start': 842.739, 'duration': 1.421}, {'end': 850.504, 'text': "And let's change the list style type to none, much like we did for the top menu, the first level.", 'start': 844.72, 'duration': 5.784}, {'end': 854.809, 'text': "So I'm just going to fix up the anchors within here.", 'start': 851.745, 'duration': 3.064}, {'end': 857.812, 'text': "We can see at the moment it's already looking a little bit nicer.", 'start': 855.049, 'duration': 2.763}], 'summary': 'Applying padding to elements, fixing unordered lists, and adjusting list style type for improved appearance.', 'duration': 28.226, 'max_score': 829.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk829586.jpg'}, {'end': 903.303, 'src': 'heatmap', 'start': 871.748, 'weight': 2, 'content': [{'end': 878.71, 'text': 'And that means we can go ahead and give it a little bit of padding, five pixels on the top and bottom and zero on left and right.', 'start': 871.748, 'duration': 6.962}, {'end': 880.891, 'text': 'And that just spaces things out nicely.', 'start': 879.17, 'duration': 1.721}, {'end': 883.112, 'text': "So we've now got these two dropdowns.", 'start': 881.511, 'duration': 1.601}, {'end': 885.392, 'text': 'We can go ahead and just hide one if we wanted to.', 'start': 883.212, 'duration': 2.18}, {'end': 891.895, 'text': 'So if we just stick a display none on that, that shows what the dropdown for this will be here.', 'start': 885.493, 'duration': 6.402}, {'end': 900.341, 'text': "So we've got the look of our dropdowns working, but we now need to only show them when we click on them.", 'start': 892.655, 'duration': 7.686}, {'end': 903.303, 'text': 'So how are we going to do this without JavaScript?', 'start': 900.821, 'duration': 2.482}], 'summary': 'Styling dropdowns with padding and hiding, seeking onclick display without javascript.', 'duration': 24.133, 'max_score': 871.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk871748.jpg'}, {'end': 949.495, 'src': 'heatmap', 'start': 918.773, 'weight': 0.813, 'content': [{'end': 920.654, 'text': "So let's go ahead and apply this now.", 'start': 918.773, 'duration': 1.881}, {'end': 928.838, 'text': "But the first thing we want to do is actually, by default, hide these dropdowns because we obviously don't want them to display initially.", 'start': 921.654, 'duration': 7.184}, {'end': 934.603, 'text': 'So all we need to do is, for nav content, we need to give this a max height of 0.', 'start': 929.638, 'duration': 4.965}, {'end': 940.548, 'text': "You can imagine giving something a max height of 0 means it doesn't show, with the exception of if it has padding.", 'start': 934.603, 'duration': 5.945}, {'end': 946.453, 'text': 'So for example, if we did have a padding of 20 pixels on this nav content, it still shows.', 'start': 940.908, 'duration': 5.545}, {'end': 949.495, 'text': "That's why, remember, we created this nav sub.", 'start': 946.893, 'duration': 2.602}], 'summary': 'Apply default hiding by setting max height of 0 for dropdowns.', 'duration': 30.722, 'max_score': 918.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk918773.jpg'}, {'end': 1058.104, 'src': 'heatmap', 'start': 1032.605, 'weight': 0.731, 'content': [{'end': 1039.587, 'text': "So we're basically saying when this is focused, target this nav content along the same level.", 'start': 1032.605, 'duration': 6.982}, {'end': 1050.857, 'text': 'So what we can do then is do something like max height 400 pixels, which is going to increase the max height of the nav content, which remember is 0.', 'start': 1040.487, 'duration': 10.37}, {'end': 1055.581, 'text': "And therefore, when we click these, that's going to show them elements.", 'start': 1050.857, 'duration': 4.724}, {'end': 1058.104, 'text': 'Cool So this is looking really good.', 'start': 1056.362, 'duration': 1.742}], 'summary': 'Increasing max height to 400 pixels will display the nav content, resulting in a good outcome.', 'duration': 25.499, 'max_score': 1032.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk1032605.jpg'}, {'end': 1099.125, 'src': 'embed', 'start': 1068.131, 'weight': 7, 'content': [{'end': 1072.433, 'text': 'Therefore, it disappears because our CSS is no longer applicable.', 'start': 1068.131, 'duration': 4.302}, {'end': 1077.997, 'text': "So we've done that, but let's add a couple of transitions just to make this look a little bit nicer.", 'start': 1073.454, 'duration': 4.543}, {'end': 1080.658, 'text': "So we're going to use the transition property.", 'start': 1078.737, 'duration': 1.921}, {'end': 1084.68, 'text': 'And with the transition property, we choose an element to transition on.', 'start': 1081.518, 'duration': 3.162}, {'end': 1090.122, 'text': "And we're obviously transitioning on the max height being increased from 0 to 400 pixels.", 'start': 1085.16, 'duration': 4.962}, {'end': 1092.263, 'text': 'We choose a speed.', 'start': 1091.122, 'duration': 1.141}, {'end': 1099.125, 'text': 'So in this case, we can say something like 0.4 seconds, or you could say 400 milliseconds, any speed you want, really.', 'start': 1092.423, 'duration': 6.702}], 'summary': 'Add transitions to increase max height from 0 to 400 pixels with speed of 0.4 seconds or 400 milliseconds.', 'duration': 30.994, 'max_score': 1068.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk1068131.jpg'}, {'end': 1163.918, 'src': 'embed', 'start': 1134.598, 'weight': 0, 'content': [{'end': 1135.879, 'text': "So let's take a look at this.", 'start': 1134.598, 'duration': 1.281}, {'end': 1140.422, 'text': 'If we refresh and click, you can see we get a nice drop down now, because, remember,', 'start': 1136.059, 'duration': 4.363}, {'end': 1145.466, 'text': "we're transitioning from that 0 on the max height to 400 on the max height.", 'start': 1140.422, 'duration': 5.044}, {'end': 1148.588, 'text': 'So that is pretty much it.', 'start': 1146.506, 'duration': 2.082}, {'end': 1152.35, 'text': "We've created a CSS drop down navigation.", 'start': 1148.708, 'duration': 3.642}, {'end': 1154.191, 'text': 'No JavaScript at all.', 'start': 1152.931, 'duration': 1.26}, {'end': 1155.652, 'text': 'Works perfectly.', 'start': 1154.692, 'duration': 0.96}, {'end': 1157.073, 'text': 'We can click links here now.', 'start': 1155.812, 'duration': 1.261}, {'end': 1158.154, 'text': 'We can dismiss them.', 'start': 1157.093, 'duration': 1.061}, {'end': 1163.918, 'text': "And of course, we've still got the option to have non drop down links, which we can click and go through to.", 'start': 1158.474, 'duration': 5.444}], 'summary': 'Created a css drop down navigation without javascript. works perfectly.', 'duration': 29.32, 'max_score': 1134.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk1134598.jpg'}], 'start': 617.768, 'title': 'Creating css sub-navigation', 'summary': 'Explains how to create sub-navigation with markup, emphasizing flexibility to add various content within the sub-navigation, and covers css dropdown styling, setting fixed height, applying colors, adjusting padding, margins, and list style type, and demonstrates creating a css-only dropdown navigation using focus pseudo-element and transitions to achieve a functional result without using javascript.', 'chapters': [{'end': 710.542, 'start': 617.768, 'title': 'Creating sub-navigation with markup', 'summary': 'Explains how to create sub-navigation using markup and position elements properly, emphasizing the flexibility to add various content within the sub-navigation.', 'duration': 92.774, 'highlights': ['The chapter demonstrates adding extra markup to achieve sub-navigation effects more easily, offering flexibility to add text, images, etc. within the nav-content.', 'It discusses the necessity of absolutely positioning nav content elements to avoid layout issues, highlighting the importance of proper positioning for sub-navigation.']}, {'end': 878.71, 'start': 711.343, 'title': 'Css dropdown styling', 'summary': 'Covers the styling of a css dropdown menu, setting fixed height and overflow, applying background and foreground colors, and adjusting padding, margins, and list style type to enhance the menu appearance.', 'duration': 167.367, 'highlights': ['Setting a fixed height of 70 pixels with overflow hidden for the dropdown menu The speaker sets a fixed height of 70 pixels for the dropdown menu and applies overflow hidden to prevent any overflow issues.', 'Applying background and foreground colors to the dropdown menu The speaker sets the background color to match the main navigation and adjusts the foreground color for the dropdown menu to enhance its appearance.', 'Adjusting padding, margins, and list style type for the submenu items The speaker removes padding and margins, changes the list style type to none, and adjusts the display to inline block for the submenu items to improve their appearance.']}, {'end': 1163.918, 'start': 879.17, 'title': 'Css dropdown navigation', 'summary': 'Demonstrates creating a css-only dropdown navigation, utilizing the focus pseudo-element to show/hide dropdowns and applying transitions to enhance the user experience, achieving a functional result without using javascript.', 'duration': 284.748, 'highlights': ['Creating a CSS-only dropdown navigation The chapter demonstrates creating a dropdown navigation purely with CSS, achieving a functional result without using JavaScript.', 'Utilizing the focus pseudo-element to show/hide dropdowns The focus pseudo-element is used to display and hide dropdowns when anchors are clicked, showcasing a CSS-based approach for functionality without JavaScript.', 'Applying transitions to enhance the user experience Transitions are applied to the dropdowns, utilizing the transition property with a specified speed and type to improve the visual experience for users.']}], 'duration': 546.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/QPO9HJjUktk/pics/QPO9HJjUktk617768.jpg', 'highlights': ['The chapter demonstrates creating a CSS-only dropdown navigation, achieving a functional result without using JavaScript.', 'The speaker sets a fixed height of 70 pixels for the dropdown menu and applies overflow hidden to prevent any overflow issues.', 'Utilizing the focus pseudo-element to show/hide dropdowns, showcasing a CSS-based approach for functionality without JavaScript.', 'Applying background and foreground colors to the dropdown menu to enhance its appearance.', 'Adjusting padding, margins, and list style type for the submenu items to improve their appearance.', 'The chapter demonstrates adding extra markup to achieve sub-navigation effects more easily, offering flexibility to add text, images, etc. within the nav-content.', 'Discussing the necessity of absolutely positioning nav content elements to avoid layout issues, highlighting the importance of proper positioning for sub-navigation.', 'Applying transitions to the dropdowns, utilizing the transition property with a specified speed and type to improve the visual experience for users.']}], 'highlights': ['The hover effect and click functionality are achieved using pure CSS, showcasing the power and flexibility of CSS for interactive web design.', 'The drop-down navigation features a two-tier system, providing a more dynamic user experience.', 'The chapter demonstrates creating a CSS-only dropdown navigation, achieving a functional result without using JavaScript.', 'Starting with minimal code, linking to global.css, and Google Fonts API for font selection.', 'Utilizing the focus pseudo-element to show/hide dropdowns, showcasing a CSS-based approach for functionality without JavaScript.', 'Applying transitions to the dropdowns, utilizing the transition property with a specified speed and type to improve the visual experience for users.', 'Creating navigation elements and list items with anchors for links.', 'Demonstrating the process of styling navigation menu, logo, and unordered list using CSS properties.']}