Shop Mobile More Submit  Join Login


Submitted on
July 31, 2013
Image Size
17.5 KB


3,280 (5 today)
225 (who?)
Page Menu by PizzaPotatoNBacon Page Menu by PizzaPotatoNBacon

:star: Can be used by all! :star:

For Premium Members and Super Groups: Paste the code below on any widget you desire to put it on. :flirt:

For Regular Members: Paste the code into one of default widgets/ widgets available to all users. Widgets such as your deviantID, Featured Deviation, Newest Deviations, etc.

Hello, everyone! :wave: I have something new for you guys to use on your profiles! :la:

I present to you all, a new kind of menu! :w00t: Now, you can have much more fancier menus on your profile- hover over an item, and you'll see why! :dummy: You can also "highlight" a certain item, as if it was "selected". :eyes:

Of course, you can't customize the colors, and you can make much more advanced and fancier page menus with a certain technique (I suggest :+devwatch:ing `CypherVisor for a tutorial on this technique ;)), but said technique requires a lot more skill and tinkering. :P :cough: In other words, you need at least basic knowledge of Journal CSS to be able to make yourself a fancier menu than the one offered here. :hmm:

The Code:

<div class="gallery-categories browse-facet">
<li><a href="" class="selected">Highlighted Item</a></li>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
<div class="noncollapseHeader"><b>Header Here</b></div>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>
<li><a href="">Item</a></li>

:bulletgreen: There is no limit to the amount of list items you can use. :D Don't use more than you need, though! ;)
:bulletgreen: If you want more headers, add another "<div class="noncollapseHeader"><b>Header Here</b></div>" in between lists! :la:
:bulletgreen: If you want to separate lists, make sure to end it with a "</ul>". :nod:
:bulletgreen: There is no limit to the amount of list items you can "highlight!" :) To highlight a list item, add "class="selected"" to "<a href="">". Example: <a href="" class="selected">List Item to be highlighted

If you have any questions, feel free to ask me! :w00t:

Tumblr | Twitter | My gallery

This Custom Box Resource is free to use for all. :aww:

Posted on July 31, 2013 9:08 PM PHT.

Resource provided by Me, `fluf-studios, Alex R.
Add a Comment:
Biirdi Featured By Owner Nov 1, 2014  Hobbyist Digital Artist
can I say this is the most amaze thing ever thank you thank you omg I have been trying to figure this out for AGES
How do you change the colour of the writing, though? Can you change it when its highlighted?
TMNTiluvpizza Featured By Owner Jun 24, 2014  Student General Artist
can you explain how to add links?... 
PizzaPotatoNBacon Featured By Owner Jun 25, 2014  Student General Artist
See the "<a href="">Item</a>"'s in the description? Put your link between the quotes (<a href="LINK"></a>). :D
TMNTiluvpizza Featured By Owner Jun 25, 2014  Student General Artist
Thank you!
ladny Featured By Owner Jun 4, 2014
This may be a stupid question but could the menu also collapse? ;w;  Like if you hover over the heading and a drop down kind of menu?
PizzaPotatoNBacon Featured By Owner Jun 4, 2014  Student General Artist
I'm afraid not. :no: That requires another good amount of coding, and this was plucked out of dA's own code. =P (And don't worry, that was not a stupid question at all. :icontouchplz:)
pachisu Featured By Owner Jan 26, 2014
Love this tutorial!
I was wondering if it was possible to show an image on the side after hovering over a text/link (or maybe even another image @__@ )?
Michiyo--Chan Featured By Owner Dec 8, 2013  Hobbyist Digital Artist
This is very useful! Thank you! ;v;
PizzaPotatoNBacon Featured By Owner Dec 8, 2013  Student General Artist
Thanks. :hug: Glad you like it. :D
DaniaArts Featured By Owner Sep 25, 2013   Digital Artist
Thank you :heart:
Add a Comment: