Tessisamess

OOC Contact: Hidden Nav





Mauris ut ipsum magna. Nunc ullamcorper purus orci. In ut turpis congue, porta nisl quis, viverra ipsum. Donec posuere orci sit amet dui finibus, non vulputate leo condimentum.



Mauris ut ipsum magna. Nunc ullamcorper purus orci. In ut turpis congue, porta nisl quis, viverra ipsum. Donec posuere orci sit amet dui finibus, non vulputate leo condimentum.
NAVIGATION LINK ONE LINK TWO LINK THREE LINK FOUR LINK FIVE



Information

Hey guys; double code post today, yay! After making my game ads I thought using the same details tricks would be SUPER cute for contact navs, so here they are finally since I didn't have time last month! There's a vertical and horizontal version available depending on your preference, and blurb/icon/nav can each be deleted easily without needing extra editing to account for it. I've also got info below on how to add extra function via your layout's CSS, so that's fun! Enjoy! ♥

Character aesthetic for Horizontal demo borrowed from [info]hitter!

Coding: Vertical



Coding: Horizontal



Installation Guide

Paste into an entry and fill in the following!

BACKGROUNDURL - Container background
ICONURL - Userpic
BLURBHERE - Blurb box
LINKURL and LINKTITLE - Details nav link (copy/paste as needed!)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

TO GET RID OF THE BLUE OUTLINE & ADD ANIMATIONS
This won't work on entry view, but since nav codes are almost always without an lj-cut to hide it, you can add the following to your layout CSS to make sure when you click the nav the blue outline doesn't show up!

summary:focus{outline:none;}

You can also add this to your layout if you want a little extra mustard on it and it will slide your nav open with an animation!

details [open] summary ~ *{animation:slideout 0.9s ease-in-out;} @keyframes slideout{0%{max-height:0;overflow:hidden;}100%{max-height:500px;}}

FONTS
helvetica,arial,sans-serif - Overall text
arial black,gadget,sans-serif - Nav text

IMAGES
https://i.imgur.com/PimW97R.png - Vertical nav menu icon; here's a light version if your background is darker!

COLORS
#fff All text and links
#000 Container background
0,0,0 All overlay backgrounds


Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Comments

From:
(will be screened)
(will be screened)
Identity URL: 
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.