8/22/2023 0 Comments Icefaces menuitem hoveroverThis is achieved in the same manner as the basic menu effect, by selecting deeper into the menu and applying hover effects to show/hide sub-menu items using the same principles. The second menu is a little more complex and provides a list of horizontal expanding sub-menus when opened. The first menu is straightforward and simply drops upon hover, revealing a list of items that will each change background color when hovered over. Menu items are controlled using the nav > div and related selectors, and these items are also set to center their own content using flex and respond to hover events by applying transitions and animations. Next, the first two menus are selected using the nth-child pseudo-class, to extend their transitions with height which will cause the menu to open vertically when activated. This demonstrates how multiple transitions can be chained inside a single CSS rule. The selector nav:hover causes the nav item, when hovered over, to transition it’s background color and height, using 120ms and 240ms linear transitions respectively. Here’s where we start to get into the actual hover logic of the menu. The nav > header selector sizes the menu header to -nav-size and flex is used once again, in this case to center the text inside the header both horizontally and vertically. Note the transition on this element’s non-hover selector, which will cause the element to smoothly transition back to it’s default state (instead of just snapping back immediately). The nav items (the root containers for each menu) are set to -nav-size and styled with various properties, and are also defined as flex containers to allow proper spacing of menu items. Next, the body is styled, scaled to 100% height and width of the document, and set to display content in a horizontal flex container. The item-fade-in animation will be used to show the hidden menu items by setting their display property to flex and fading-in the items with opacity. Background colors for the menus are also defined here. Here we have a base size for navigation items as -nav-size that will set both the height and width of a closed navigation menu to 12vh(which is 12% of the viewport height). Variables are a powerful feature introduced in CSS Level 3 that greatly simplifies the task of organizing CSS code. First up is the :root block, which contains CSS variables that will be used throughout the rest of the file.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |