Tessisamess

Previous | Next

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

(Anonymous)
Mar. 8th, 2018 08:09 pm (UTC)
WOMAN. You're going to make me redo all my journals and shiz this month, aren't you? *ineffective fistshake.*
Mar. 8th, 2018 08:12 pm (UTC)
YOU'VE FOUND ME OUT!!!
Mar. 8th, 2018 08:25 pm (UTC)
Love these ♥
Mar. 8th, 2018 08:28 pm (UTC)
Heeee!! ♥
Mar. 8th, 2018 09:28 pm (UTC)
these are AWESOME.
Mar. 8th, 2018 09:30 pm (UTC)
Heee, ty ty! ♥ I wanted to get these made and posted last month but LOL.
Mar. 8th, 2018 09:32 pm (UTC)
better late then never? :D
Mar. 8th, 2018 09:33 pm (UTC)
YUP HAHA
Mar. 12th, 2018 10:17 pm (UTC)
BTW I LOVE THE THICK LINES
May. 5th, 2018 03:33 am (UTC)
Far be it from me to NOT astronomically miss the point, which means I've gotta ask if there's a way to have the links show by default, no magic click involved?
May. 5th, 2018 03:54 am (UTC)
LOL yup! The details tag is by default closed, but you can add open to the opening tag to leave it open! Just find <details style=" in the code you want to use and add it like so: <details open style=" and you're good to go. :D
May. 5th, 2018 03:57 am (UTC)
YAY thanks for always lookin' out.