A ul > li is perfectly acceptable, but there's no need for ul > li > a CSS in my book, especially for a simple project like this. As you can see, this only consists of two a links. For this example, only two items are included, but you can add many more. The second div.nav-items contains our actual menu, which is for the end section of our nav.
It also contains the markup for our nav-burger, but onto that later. One, div.logo-container is for the beginning of the nav which could contain a company name, logo, etc. Following this are two important div containers. If you aren't utilizing semantic HTML yet you are behind the times, my friend. They all yield the same result, mostly.Īnyway, everything is wrapped in a nav.navigation container. Disclaimer first: a navbar can be made a million different ways - some are complicated, some are simplistic, some are over-engineered, some are basic. Now, there are a few things going on here. Yes, this can be done through various ways (this is even inspired by Bulma, which is an amazing modular framework), but for my own understanding as a dev, I wanted to do it myself and have something simple without so much bloat from your typical framework.įirst, we're going to create a basic nav menu in HTML:Įnter fullscreen mode Exit fullscreen mode Secondly, I wanted something I could frequently come back to and easily implement in something new I was working on. So, firstly always ensure your site looks great on multiple screen widths. Mobile responsiveness should absolutely be a priority for any webpage. Titles need to align properly with values. Here, not everything is readable or attractive if you just let it flow naturally and break wherever it feels like. Things get a lot more challenging if you have tables, lists, cards, buttons, icons, and images. The modern web is viewed, by a very large percentage, on a mobile device. If you can't make a pure text page responsive, you are doing it wrong. It seems simple, but these two ideas are very important. It needed to be customizable to fit any page.It needed to be responsive on any screen size.So I finally dived in and built my own solution. One thing I've always struggled with is building a responsive navigation that can be implemented on virtually any site. Getting to know the how & the why behind this stuff is the best way to grow as a dev. As a junior developer, I'm always looking for ways to increase my knowledge, even on things I've already learned or on things that might have easier solutions.
0 kommentar(er)
