Elements - Navigation
Websites provide different types of media and information. An intuitive way to organize that information is crucial for a great user (read "website visitor") experience. In Sitejet you can easily set up great-looking menus and navigation bars and in this article, we will show you how.
Table of Contents
Adding pages to your website
How to create submenu items
Trying to create a submenu within your regular navigation? We've got you covered! Both our page manager and customizable presets do all the hard lifting, leaving you with more time to do the fun stuff. Let's show you an example.
Open the page manager. First, you need to create your subpages. Simply hit the plus icon on the left to create a new page. Notice the 3 parallel lines directly beneath the plus icon? You can drag and drop your pages to change their order. In order to create a subpage simply drag it beneath the page that shall be the parent. Then keep dragging the subpage to the right until it snaps into place (see orange line with its triangle indicator on the left)
You can also create new pages from this subpage once you created at least one. In the DOM (or HTML structure) this will create a new submenu unordered list into your existing menu and attribute classes automatically. In case you want to take it from here, you are all set!
But to save even more time simply make use of one of our header or menu presets that already come with submenus and other useful features. Let's choose the header Loki from the presets list under Add content and drag it onto your website. Then access the preset settings by clicking the puzzle icon in the breadcrumbs.
Open the tab Navigation in the preset settings and simply tick Use submenu. That's it! The header comes with a predefined style and layout for your submenu. You can overwrite these as you desire in your custom CSS.
This is how it looks like when hovering over Courses. Most header presets will have submenus built-in already.
As you can see, creating a submenu in Sitejet is quick and easy.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. Here you can go directly to our community. If you need help with your Slack account, please e-mail us to firstname.lastname@example.org .