#css navigation

[divinector]

CSS Animated Menu Bar

[codingflicks]

Navbar Animation with Moving Hover Effect

[mspeevee]

Me seeing a cute ass design on toyhouse: man that's so fucking good. Sure wish OPs fucking custom CSS didn't nuke the site control buttons so I can't click on favourite

[kriskukko]

Hello!! I hope you are doing well. Your art is so freaking amazing 👏 I'm just enjoying my time looking at all of it!!! I did have a question tho-- how did you make your webcomic website? I'm curious of the all the steps you took!

this is going to expose my age and personality, but my website making process has two steps in total

-- get the domain/hosting (mine is over at a finnish hosting site) -- code it

and when i say code i mean like, some real mid 2000s shit when i was 13 years old. straight up barebones html and css. there are many good actual website makers these days, but i am a self-proclaimed control freak nincompoop so to me it has always appeared faster to just 'make it from scratch' to get exactly what i wanted (i owe w3schools.com my everything by now probably). i figured -- worked for me a nigh decade ago why wouldn't it now? its still just a string of links is it not (and while it was A THING to have back in the day, am glad iframes are no longer around). i have upgraded my game with some very rudimentary php since ye olden days, but even that i only use for one of the graphic novels. turns out you can really make updating a website and layouts and stuff easier by making a composite out of multiple files and then updating the parts separately. SO NEAT. i will acknowledge that while i thought of responsiveness in the coding process, it is probably not perfect. this is my blatant mirror marketing, since i personally prefer to read things on bigger screens and it is the headscape the art was made etc etc. as such, i'll just take this opportunity and formally apologize to everyone on mobile if the experience is atrocious at your end. with that said -- thank you for the kind words and the question! they brought much joy and nostalgia to my afternoon <3

[antirepurp]

ohhhh i hate making responsive web pages grrrr wdym i need to find a way to completely transform this navigation bar for 480px wide screens augh

[aloftmelevar]

i'm not a DNI person but actually do not fw me if you're like this

[codenewbies]

Animated Dropdown Menu

[sinsangria]

Website is still a WIP but I'm happy with how it's looking so far! The lore is also a bit unpolished but I think it pretty good for a non-writer! Link in notes. Also my Homestuck reveal post only needs 8 more notes, so check that out as well if interested.

[jcmarchi]

Toe Dipping Into View Transitions

New Post has been published on https://thedigitalinsider.com/toe-dipping-into-view-transitions/

Toe Dipping Into View Transitions

I’ll be honest and say that the View Transition API intimidates me more than a smidge. There are plenty of tutorials with the most impressive demos showing how we can animate the transition between two pages, and they usually start with the simplest of all examples.

@view-transition navigation: auto;

That’s usually where the simplicity ends and the tutorials venture deep into JavaScript territory. There’s nothing wrong with that, of course, except that it’s a mental leap for someone like me who learns by building up rather than leaping through. So, I was darned inspired when I saw Uncle Dave and Jim Neilsen trading tips on a super practical transition: post titles.

You can see how it works on Jim’s site:

This is the perfect sort of toe-dipping experiment I like for trying new things. And it starts with the same little @view-transition snippet which is used to opt both pages into the View Transitions API: the page we’re on and the page we’re navigating to. From here on out, we can think of those as the “new” page and the “old” page, respectively.

I was able to get the same effect going on my personal blog:

Perfect little exercise for a blog, right? It starts by setting the view-transition-name on the elements we want to participate in the transition which, in this case, is the post title on the “old” page and the post title on the “new” page.

So, if this is our markup:

<h1 class="post-title">Notes</h1> <a class="post-link" href="/link-to-post"></a>

…we can give them the same view-transition-name in CSS:

.post-title view-transition-name: post-title; .post-link view-transition-name: post-title;

Dave is quick to point out that we can make sure we respect users who prefer reduced motion and only apply this if their system preferences allow for motion:

@media not (prefers-reduced-motion: reduce) .post-title view-transition-name: post-title; .post-link view-transition-name: post-title;

If those were the only two elements on the page, then this would work fine. But what we have is a list of post links and all of them have to have their own unique view-transition-name. This is where Jim got a little stuck in his work because how in the heck do you accomplish that when new blog posts are published all the time? Do you have to edit your CSS and come up with a new transition name each and every time you want to post new content? Nah, there’s got to be a better way.

And there is. Or, at least there will be. It’s just not standard yet. Bramus, in fact, wrote about it very recently when discussing Chrome’s work on the attr() function which will be able to generate a series of unique identifiers in a single declaration. Check out this CSS from the future:

<style> .card[id] view-transition-name: attr(id type(<custom-ident>), none); /* card-1, card-2, card-3, … */ view-transition-class: card; </style> <div class="cards"> <div class="card" id="card-1"></div> <div class="card" id="card-2"></div> <div class="card" id="card-3"></div> <div class="card" id="card-4"></div> </div>

Daaaaa-aaaang that is going to be handy! I want it now, darn it! Gotta have to wait not only for Chrome to develop it, but for other browsers to adopt and implement it as well, so who knows when we’ll actually get it. For now, the best bet is to use a little programmatic logic directly in the template. My site runs on WordPress, so I’ve got access to PHP and can generate an inline style that sets the view-transition-name on both elements.

The post title is in the template for my individual blog posts. That’s the single.php file in WordPress parlance.

<?php the_title( '<h1 class="post-single__title" style="view-transition-name: post-' . get_the_id() . '">', '</h1>' ); ?>

The post links are in the template for post archives. That’s typically archive.php in WordPress:

<?php the_title( '<h2 class="post-link><a href="' . esc_url( get_permalink() ) .'" rel="bookmark" style="view-transition-name: post-' . get_the_id() . '">', '</a></h2>' ); ?>

See what’s happening there? The view-transition-name property is set on both transition elements directly inline, using PHP to generate the name based on the post’s assigned ID in WordPress. Another way to do it is to drop a <style> tag in the template and plop the logic in there. Both are equally icky compared to what attr() will be able to do in the future, so pick your poison.

The important thing is that now both elements share the same view-transition-name and that we also have already opted into @view-transition. With those two ingredients in place, the transition works! We don’t even need to define @keyframes (but you totally could) because the default transition does all the heavy lifting.

In the same toe-dipping spirit, I caught the latest issue of Modern Web Weekly and love this little sprinkle of view transition on radio inputs:

Notice the JavaScript that is needed to prevent the radio’s default clicking behavior in order to allow the transition to run before the input is checked.

[dravidious]

You're more amazing than lineart

You're more amazing than tag blocking

[divinector]

Animated Dropdown Menu

[codingflicks]

Responsive Navigation Menu

[codewithrandomartical]

100+ Navigation Bar HTML and CSS (Free Demo +Source Code)

Navigation Bar Using HTML and CSS

Hello Developers! Welcome to Codewithrandom with another informative blog. Today we’ll see how to make a Navigation Bar with Source Code. Here is the Latest Collection of free Navigation Bar codes in HTML and CSS. This is the Updated Collection of April 2023 with 36 New Navbar Source codes added.

What is a navigation bar?

A Navigation bar or a side menu is an integral part of any website, used for quick navigation links, a search bar, login/signup links, company logos, etc. Without a Navbar, any website looks incomplete.

Here we’ll show you how to create a Simple Navigation Bar In HTML and CSS with 100+ examples.

Related article — 100+ HTML, CSS, and JavaScript Projects With Source Code ( Beginners to Advanced)

Restaurant Website Using HTML And CSS With Source Code

Let’s see some cool Navigation bars in HTML and CSS.

1. Responsive Side Navigation Bar

Let’s start our list with a simple, light-themed left-sided navigation bar. Only navigation bar icons are visible on load but on clicking the hamburger icon side bar expands.

2. Bootstrap Navigation Bar

Simple and responsive navigation bar. This one is on top with several different categories and also a search bar. Additionally, it also has a login and signup button.

How To Build Interest Calculator Using JavaScript

3. Transparent Navigation

This is a very well made Navigation bar by Manas Yadav, when you click a navigation bar button it auto scrolls to its location on the page. Can be used for homepages.

4. Sticky Slider Navigation (Responsive)

Another navigation bar auto-scrolls but this one is even better with more satisfying animations and design.

5. Navigation bar design

A navigation bar with a gradient in its background with a cool gradient and blinking effect on hover.

That’s it, folks. In this article, we shared the Navigation Bar In HTML And CSS Source Code with cool and different designs. We covered everything from simple and minimal Navigation bars to bars with auto scrolls, cool transitions, and even 3D icons. Hope you liked this article. Share this with your fellow developers. Comment down below with your thoughts and suggestions

See our other articles on Codewithrandom and gain knowledge in Front-End Development.

Thank you

read full article and get complete source code

[the-harvest-field]

Navigating the Maze of Web Development: Common Errors and How to Fix Them

Type your email… Subscribe Web development is an intricate and dynamic field, with developers constantly facing various challenges. As web technologies evolve, so do the errors and issues encountered during development. In this article, we’ll explore some of the most common errors web developers encounter and provide solutions to help you navigate the often perplexing world of web…

[pneuma-themes]

Primavera: All in One Page #01 by @pneuma-themes

Always, it's spring, and everyone's in love, and the flowers pick themselves.

Live Preview / Get the code: [Pastebin] / [Github]

Another Twitter inspired layout. This is an all-in-one page with about, blogroll, tags, and FAQ sections. The code has been heavily annotated, so please go through the code first before sending me an ask!

Important note: Your blog must have been given permission to use Javascript on pages. As of 2024, the waiting time is almost indefinite, and thus might necessitate a circumvention. You can refer to the post I linked to find the how-to.

For the blogroll to display the list of blogs you follow, you must enable this option on the blog setting:

This will not work on secondary blogs, as they do not have that option on their settings.

Features:

Five custom links

Everything is customizable, from the icons to the content and the colors. Customizable options can be found on the :root section of the CSS.

A built-in light-on/off mode that can be toggled by one click.

A header image. The size of your header image is 60% of your screen width x. 250px. The image should resize automatically.

An endless space for practically every section. You can be as detailed or as concise as you like.

Sticky navigation tabs.

A short "currently" tab in the about section, can be about anything you like.

This is a page theme, so blog posts will not be displayed. Please install this through the Add new page link instead.

Credits:

Icons: @alydae

Header: @tofuvi

Fonts: Merriweather, Albert Sans @ bunny.net

Font icons: Dencar Icons (ported by @glenthemes)

CSS tabs: bulma.css, functionality adapted from this StackOverflow post.

Tooltips: tippy.js

Please like and reblog if you like or are using this!