So, to avoid this, we modify the following declaration. However, Foundation sets the position of the dropdowns relative to their (immediate) parent’s position. Well, this is not a mega menu, is it? Let’s create one! First, we have to position our menu relative to the main menu so that they will be vertically aligned (on medium and up screens) and have an equal width (i.e. Here’s how it looks with the default styles: If we don’t enclose the menu inside this container, its width will be set to the viewport width.Īt this point we’re ready to start focusing on the mega menu (which we will give a class of m-menu). In this way, our menu will have a maximum width equal to the grid width, which is 62.5rem (1000px) by default. Notice that we wrap the menu within a div element, with a class of contain-to-grid. The code below shows the markup for the top bar: Logo Menu University Programs In fact, we’ll build two variations of this menu. In the upcoming sections, we’ll create a mega menu for two different items in the main menu: the “Programs” menu item and the “Studies” item. We just construct the menu by taking advantage of the basic code for the topbar component that Foundation provides us. The following screenshot gives you an idea of how it will look:Īs you can see, nothing fancy happening here. Before jumping into the process of creating our custom mega menu, let’s first build the main menu itself (i.e.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |