Shop Mobile More Submit  Join Login
Code Snippet - 2 Column Menu by Gasara Code Snippet - 2 Column Menu by Gasara
09.10.2013 - Updated to remove dA's new default external link styles.

Here we have a template for a simple 2 column navigation menu. The menu has been designed to work on profile pages but can be added to full journal css too. Please see below for help with using this code snippet.

I N F O
--------------------------------------------------

Width: Liquid
Customizable: Yes
Tested in IE, Chrome & Firefox

Custom journal skins can only be used by premium members.

H E L P
--------------------------------------------------

Click the Install button in the sidebar to add the skin to your gallery. The links below will provide further help with adding the skin to a widget on your profile page and changing the style of the menu.

FAQ12 - How do I add a custom menu?
FAQ22 - How do I install a journal skin?
FAQ23 - How do I change my journal skin?
FAQ24 - How do I edit my journal skin?

Basic HTML Formatting Guide
Basic CSS Style Guide


U S A G E
--------------------------------------------------

- This skin is free to use
- You can completely edit this skin for personal use
- You can use this skin on your profile
- You can add this code to existing or new journal CSS

- You may not redistribute this skin, edited or otherwise
- You may not sell this skin, edited or otherwise
Add a Comment:
 
:iconiipaw:
iiPaw Featured By Owner 4 days ago  Hobbyist Digital Artist
Is there a way to use this in custom boxes on my page?
Reply
:icongod-compiex:
god-compIex Featured By Owner Jan 20, 2016  Student Digital Artist
I'm going to try and use this...
Reply
:iconavantinostalgia:
AvantiNostalgia Featured By Owner Jan 11, 2016  New Deviant Professional Digital Artist
Cool! I think I've found what I've searched for... But.
I wonder if it possible to make to make link boxes out of images? Yes, I know how to make an image as a link... But it would be awesome to make a changing image. I. e. becoming darker, lighter, changing colours or filtred when you put a cursor on it...

In another words, I want to know a css code of making a link out of two images! Ilke, for example loish in her custom box has.
I understand that she made in Photoshop two differrent images for one link, she didn't make her boxes completely out of css, like in this skin of yours.
...I hope I wrote understandable Sweating a little...
Reply
:icontonycoyote:
TonyCoyote Featured By Owner Dec 29, 2015  Hobbyist
Nicely done! This certainly is very useful.
Reply
:iconheliumfox:
HeliumFox Featured By Owner Dec 22, 2015  New Deviant Hobbyist Digital Artist
Thank you !
Reply
:iconhauntingserenity:
HauntingSerenity Featured By Owner Dec 17, 2015  Hobbyist General Artist
Hiw do we use this? '-'
Reply
:iconthefiremousebogiwis:
TheFireMouseBogiwis Featured By Owner Aug 9, 2015
Helpful, thanks!
Reply
:iconskystream-chan:
Skystream-Chan Featured By Owner Aug 2, 2015  Hobbyist General Artist
gah can someone help me with this? ;-; 
Reply
:iconumuna:
umuna Featured By Owner Aug 5, 2015
sorry, this can only be used by premium members because it's a journal skin ^^;
Reply
:iconskystream-chan:
Skystream-Chan Featured By Owner Aug 5, 2015  Hobbyist General Artist
kk 
Reply
:iconbeesallatonce:
beesallatonce Featured By Owner Jun 5, 2015  Hobbyist General Artist
is there a way to make one of these white?
Reply
:iconflltch:
FLlTCH Featured By Owner Jul 14, 2015
you can go into the css code and go to a.menu and change the letters in background-color
but that would change all of them
Reply
:iconbeesallatonce:
beesallatonce Featured By Owner Jul 27, 2015  Hobbyist General Artist
thanks!
Reply
:iconflltch:
FLlTCH Featured By Owner Jul 27, 2015
no prob
Reply
:iconlolwares:
LolWares Featured By Owner Apr 18, 2015  Professional Filmographer
what program did you use to make this?
Reply
:iconseutani:
Seutani Featured By Owner Apr 17, 2015
^^; Nevermind! I got it! :) 
Reply
:iconkelmeloo:
kelmeloo Featured By Owner Apr 3, 2015  Student Photographer
Using on my page :meow:
Reply
:iconpocketchocolate:
PocketChocolate Featured By Owner Mar 26, 2015  Hobbyist General Artist
is there a way to change their color? Instead of black ; w;
Reply
:icongriifet:
griifet Featured By Owner Mar 31, 2015  Student General Artist
I know only a small but about coding but maybe if you installed it, edited the outer face coding for it's looks you could find the color, and replace it with a url link to an image or color you want if it's even possible. Hope that made sense. :/
Reply
:iconmelmuff:
MelMuff Featured By Owner Mar 13, 2015  Hobbyist General Artist
I know I posted a while ago but I forgot to say that I changed mine to 3 columns. Hope that is okay. I luv how I was able to customize it to my own personal liking. Thanks again for posting this code. :)
Reply
:iconjazzyviper:
JazzyViper Featured By Owner Edited Feb 26, 2015  Hobbyist Digital Artist
how do i change the links and link names? help please ;; 

//EDIT nevermind, i got it figured out! ^^;
Reply
:iconairbornecloud:
AirborneCloud Featured By Owner Mar 10, 2015  Student Digital Artist
How didja do it XD I can usually figure it out- but I can't :nuu:
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
Do you still need help?? 
Reply
:iconduskskytail:
DuskSkytail Featured By Owner Jan 18, 2016  Hobbyist General Artist
i need help
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Jan 21, 2016  Hobbyist Traditional Artist
Whats up?
Reply
:iconduskskytail:
DuskSkytail Featured By Owner Jan 21, 2016  Hobbyist General Artist
i dont know how to change the link names and put the links in
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Jan 26, 2016  Hobbyist Traditional Artist
When editing the menu you should see something like this: < a class="menu" href="">< /a> (without the spaces tho)

You want to change it to look like this: < a class="menu" href="http: //google.com/">Google< /a>

But instead insert your link where mine is and the name where i've put 'Google' 

!!dont include the spaces!! those keep the code /not working/ so you can see what I am typing (: 
Reply
:iconduskskytail:
DuskSkytail Featured By Owner Jan 26, 2016  Hobbyist General Artist
Omg thanks
Reply
(1 Reply)
:iconairbornecloud:
AirborneCloud Featured By Owner Mar 23, 2015  Student Digital Artist
Yus ;o;
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
Okay so changing the link names/destination is pretty easy, 
so you start out with this correct? 
< a class="menu" href="">Link< /a>

so when ever you see a 'href' is basically saying 'link the text to this destination' so if we want to link it to, uhhh, google we would change it to this:

< a class="menu" href="http: //google.com/">Google< /a>

!!dont incube the spaces!! those keep the code not working so you can see what I am typing (: 

I hope that helps clear up some confusion~
Reply
:iconairbornecloud:
AirborneCloud Featured By Owner Mar 23, 2015  Student Digital Artist
OH okai. Now I feel stoopidddd XD Danke!
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
You're welcome~ If you need any other help just let me know (: 
Reply
:iconairbornecloud:
AirborneCloud Featured By Owner Mar 23, 2015  Student Digital Artist
Will do!
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner Feb 24, 2015  Hobbyist Traditional Artist
I only want the first 6 tab thingies, not the last two. If I take the last to codes off it has 4 on the left and 2 on the right. How can I get 3 on the left and the right?
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
did you still need help?
Reply
:icona-p-p-l-e-j-u-i-c-e:
A-p-p-l-e-j-u-i-c-e Featured By Owner Mar 24, 2015  Hobbyist Traditional Artist
No I got help
Reply
:iconbunni-mi:
bunni-mi Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
Helloo, how do I add links to the bars? 
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
have you figured it out or do you need help?
Reply
:iconbunni-mi:
bunni-mi Featured By Owner Mar 23, 2015  Hobbyist Digital Artist
I still need help 
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 23, 2015  Hobbyist Traditional Artist
Okay so changing the link names/destination is pretty easy, 
so you start out with this:
< a class="menu" href="">Link< /a>

so when ever you see a 'href' is basically saying 'link the text to this destination' so if we want to link it to, uhhh, google we would change it to this:

< a class="menu" href="http: //google.com/">Google< /a>

!!dont incube the spaces!! those keep the code not working so you can see what I am typing (: 

I hope that helps clear up some confusion~
Reply
:iconbunni-mi:
bunni-mi Featured By Owner Mar 23, 2015  Hobbyist Digital Artist
Aah thank you for the help! 8)  It's been confusing me for some time now haha
Reply
:iconneko-loverx3:
neko-loverx3 Featured By Owner Mar 24, 2015  Hobbyist Traditional Artist
You're welcome! Glad I could help (:
Reply
:iconidoodlechibis:
IdoodleChibis Featured By Owner Jan 28, 2015  Hobbyist General Artist
Thank you for these! However i had the hardest time trying to get the journal to show in my gallery, im not sure if this did it but i changed it to feature literature and then it seemed to work c:
Thanks again! ♥
Reply
:iconhawiibo:
hawiibo Featured By Owner Feb 8, 2015  Hobbyist Artist
how did you do it mine keeps saying literature xc
Reply
Add a Comment:
 
×




Details

Submitted on
September 25, 2013
File Size
1.0 KB
Link
Thumb
Embed

Stats

Views
25,424 (31 today)
Favourites
1,793 (who?)
Comments
129
Installs
5,127 (5 today)
×