#navigation tutorial

Tired of scrolling back up when you've hit the bottom of your blog?

Here is a quick guide on how to add a cute, floating scroll-to-top button to your Tumblr theme. It fades in when you scroll down and glides smoothly back to the top when clicked!

The best part? You only need to copy and paste one thing.

The Step-by-Step

Go to Edit Appearance > Edit Theme > Edit HTML.

Click inside the code box and press Ctrl+F (or Cmd+F on Mac).

Search for (it is usually at the very bottom).

Paste the code below right before the tag.

Update Preview and Save!

How to add navigation links:

To add navigation links DO NOT have any spaces after your navigation item, use a comma to separate them!

Basic Navigation Items

Home~/, About~/about-page, Contact~/contact-page The ~ separates your navigation item (the word to the left of ~) and the link (anything to the right of ~). If you don’t want the navigation item to have a link just don’t put the ~ there.

If you’re adding a hyperlink you don’t require the /, like so:

Website~https://iavisuals.com.au/

Drop Menus

#Categories, -Photography~/tagged/photos, -Paintings~/tagged/paintings, -Personal Art~/tagged/personal The # indicates you want to add a drop menu, while the - indicates a child to that drop menu. Unfortunately you can’t do nested drop menus, maybe that is something I will add to a later update.

Ask & Submit

ask, submit

This is the code I used for my personal blog:

::-webkit-scrollbar { width: 10px; background: #000000; } ::-webkit-scrollbar-thumb { background: #458eff; border-radius: 5px; }

Hi, first of all the default cursor of this site is not very cutesy so I wanted to change it to something that will suit the aesthetic of my blog.

First, copy this code in your CSS area. Commonly, you can paste it after the <style>/<style type="">.

::selection { color: {color:background}; background: {color:text}; }

You may change the colors of it using this website.

::selection { color: {color:background}; (THIS IS FOR THE COLOR OF THE TEXT WHILE SELECTING IT) background: {color:text}; (THIS IS FOR THE BACKGROUND WHILE SELECTING IT) }

New Post has been published on http://www.htmluse.com/3d-rotating-navigation/

3D Rotating Navigation

Download   Demo

A 3D rotating navigation, powered by CSS transformations.

Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has to be efficient.

1. HTML

We created a <header> element to wrap the logo and the trigger for the rotating navigation (.cd-3d-nav-trigger) and a <main> element to wrap the main content. We used an unordered list for the navigation, semantically wrapped into a <nav> element. As pan.cd-marker has been appended to the <nav> to create the marker for the selected item in the navigation.

<header class="cd-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a> <a href="#0" class="cd-3d-nav-trigger">Menu<span></span></a> </header> <main> <!-- all your content here --> </main> <nav class="cd-3d-nav-container"> <ul class="cd-3d-nav"> <li class="cd-selected"> <a href="#0">Dashboard</a> </li> <!-- other list items here --> </ul> <span class="cd-marker color-1"></span> <!-- marker for the selected navigation item --> </nav>

2. CSS

To realise our animation, we used CSS3 Transformations applied to the <header>,<main> and <navigation> elements.

Here is a quick preview to show you the animation process (.gif created in After Effects).

By default, the navigation (.cd-3d-nav-container) is hidden right above the viewport (translateY(-100%) and visibility(hidden)), while the unordered list (.cd-3d-nav) is rotated (rotateX(90deg) and transform-origin: bottom center). When user clicks the trigger element, the class .nav-is-visible is added to the <main>, <header> and <nav> elements which are translated of a quantity equal to the navigation height while the .cd-3d-nav is rotated back (rotateX(0)). CSS3 Transitions have been used to achieve a smooth animation.

.cd-header transition: transform 0.5s; .cd-header.nav-is-visible transform: translateY(80px); .cd-3d-nav-container /* this is the 3D navigation container */ position: fixed; top: 0; left: 0; visibility: hidden; /* enable a 3D-space for children elements */ perspective: 1000px; transform: translateY(-100%); transition: transform 0.5s 0s, visibility 0s 0.5s; .cd-3d-nav-container.nav-is-visible visibility: visible; transform: translateY(0); transition: transform 0.5s 0s, visibility 0.5s 0s; .cd-3d-nav /* this is the 3D rotating navigation */ transform-origin: center bottom; transform: rotateX(90deg); transition: transform 0.5s; main transition: transform 0.5s; main.nav-is-visible transform: translateY(80px);

The .cd-marker element has been used to create the marker for the selected navigation item (the <span> is the bottom line, while its ::before pseudo-element is the triangle). In order to change the marker color, we defined the .color-n classes (one for each navigation item). These classes change the color property of the .cd-marker. Since we set background-color : currentColor, changing the color updates the background-color too. Beside, we set border-bottom-color: inherit for the .cd-marker::before element, which is also updated changing its parent color property.

.cd-marker background-color: currentColor; .cd-marker::before /* triangle at the bottom of nav selected item */ height: 0; width: 0; border: 10px solid transparent; border-bottom-color: inherit; /* these are the colors of the markers - line + arrow */ .color-1 color: #9a57bd; .color-2 color: #c96aa4; /* other classes here */

3. EVENTS HANDLING

We used jQuery to add/remove the .nav-is-visible class when user clicks the navigation trigger.

Because many people asked me how to make this. Please be nice this is my first tutorial.

★

Step 1: Edit themes

★

Step 2: press that button 

★

Step 3 : if it's all correct you'll see this 

★

Step 4: press "standard layout" and pick "custom layout" like this :

★

Step 5: Now it needs to look like this:

★

Step 6: you search for a navigation theme : i'll be using this one : THIS it's not mine and all the credit will go to the maker.

★

Step 7: copy the code : this one : here

and put it in the empty space underneath your url

★

Step 8: now to edit your navi theme go look for this part of the code: 

And put on the place "one" a title for certain tags for example:

like this

★