Forums

No more scrolling back to the top of a huge list! Use these Fixed Category Menu codes!
Must be a Club Member to Reply
#1
Apr 20, 2010 11:08 PM

Offline
Joined: Feb 2010
Posts: 3074
This topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405


Tired of having to scroll back up to the top of your list to change categories? Well I've written a code to fix the category links to the bottom of the page! Now you can change whenever you want.

Here it is on my Hellsing layout:


Edit: I've updated this a lot. It now works on many more resolutions and browsers now, and is easier to customize the background colors of it with the gradient generator on this page:
http://www.colorzilla.com/gradient-editor/

Just click one of the gradient patterns and copy the codes it makes replacing the background codes in the first set.

Also you can find a larger assortment for category links on this page:
http://myanimelist.net/forum/?topicid=416069

The code
Modified by Shishio-kun, Dec 31, 2014 8:37 AM
 
#2
Feb 2, 2012 12:23 PM

Offline
Joined: Nov 2011
Posts: 288
Let me bump this old thread with new CSS3 way to do similar thing:


#list_surround table:first-of-type{
position:fixed;
bottom:0;
left: 0;
margin: auto !important;
}

.status_not_selected a {
color: white;
}

.status_selected a {
color: cyan;
}


It only changes the positioning of table with categories - background, width, links and all other style will be as on your current layout.

edit by Shishio: I added a couple codes to make it more centered on certain layouts. Also use the two color codes to control the colors of the links not in use and in the one in use. Here's a visual example on the Hellsing layout:
Modified by Shishio-kun, Jun 19, 2012 10:44 PM
 
#3
Mar 19, 2012 4:19 AM

Offline
Joined: Nov 2011
Posts: 288
This is my categories bar code taken from original stylesheet. It seems pretty complicated and it is supposed to work with @import, so it may require additional editing to work with MAL crappy parser.

I've used a CSS technique known as CSS Sprites to combine all buttons into one huge picture because ones made for hover & click were requested well, on hover or click, and therefore sometimes they just didn't appear at all. The code may also seem too complicated, but I don't know any other way to do it. It is valid CSS3 code though.

Add it this to the top of your CSS for this black menu:

@import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimport.css";

edit by Shishio: A visual example of this code in use on the Mahou Magica layout (and a blue version after):




Add it this to the top of your CSS for this blue menu:

@import "http://dl.dropbox.com/u/78340470/Past%20Stuff/bottommenuimportblue.css";

Here's an example of the pretty blue version on the Itsuka layout:
Modified by Shishio-kun, Jun 20, 2012 9:39 PM
 
#4
Mar 23, 2012 9:52 PM

Offline
Joined: Mar 2009
Posts: 142
Nice Shishio! Thanks! :D
 
#5
Mar 27, 2012 7:16 AM

Offline
Joined: Oct 2008
Posts: 4039
Thanks for this, but how do I move it to the front? And is it possible to replace them with pictures instead? Thanks again! :)
 
#6
Mar 27, 2012 11:39 AM

Offline
Joined: Feb 2010
Posts: 3074
czerah said:
Thanks for this, but how do I move it to the front? And is it possible to replace them with pictures instead? Thanks again! :)


(? )It is in front of everything. You replace the background image links with your own image links. The pictures by default is the black Windows Vista like bar.
 
#7
May 12, 2012 5:14 PM

Offline
Joined: Feb 2012
Posts: 1089
I'm having some problems getting this to work. No matter what I do, I can't get the old copyright to go away and the top menu never budges. Could you take a look at my code and see what I did wrong?

lol I miss HTML. THAT I was good at. I even mastered frames pretty well. Ah well, technology advances and I have something new to learn XD.

Also, why all the status not selected tags? What do they do and what do they mean and why are there so many?

I'm using a heavilly altered version of the Animated Mizore themed Layout btw.

Thanks in advance!
 
#8
May 12, 2012 9:51 PM

Offline
Joined: Feb 2010
Posts: 3074
sisgood said:
I'm having some problems getting this to work. No matter what I do, I can't get the old copyright to go away and the top menu never budges. Could you take a look at my code and see what I did wrong?

Also, why all the status not selected tags? What do they do and what do they mean and why are there so many?

I'm using a heavilly altered version of the Animated Mizore themed Layout btw.


Go into your code, look for BORDERS. Right above it is an extra opening bracket. Thats blocked every code under it. Delete it and things should take effect.

It needs the right amount of status not selected to tell the CSS what its not targeting and to differentiate from category to category.

This CSS isn't a beginner's layout so its not really made for the bottom bar I made, it'd be better to use Veriti's for that I think.
 
#9
May 12, 2012 10:37 PM

Offline
Joined: Feb 2012
Posts: 1089
Thanks for that. I knew it was something incredibly small and simple but I just couldn't find it! I've got it working now though!
 
Jun 19, 2012 10:58 PM

Offline
Joined: Feb 2010
Posts: 3074
Made some changes to these add-ons so they'll look better on more layouts.
 
Jan 3, 2013 6:25 AM

Offline
Joined: Jan 2013
Posts: 5
uhm.. i just new here, i started making my own layout last night
(eh i kinda lame bout this) so i wanna ask if, how can i move those Fixed category on the left side of the layout?



ohh uhm and how can i change the link name of those categories ?
ex. Currently Watching > to just (Watching)
Modified by experimenting, Jan 3, 2013 6:29 AM
 
Jan 3, 2013 10:31 AM

Offline
Joined: Feb 2010
Posts: 3074
experimenting said:
uhm.. i just new here, i started making my own layout last night
(eh i kinda lame bout this) so i wanna ask if, how can i move those Fixed category on the left side of the layout?



ohh uhm and how can i change the link name of those categories ?
ex. Currently Watching > to just (Watching)


Like on my list? Use the category link tutorial first for moving to the left.

Renaming links is difficult for people just starting out, its long to explain but its basically something like this from my own CSS.


.status_selected a:after, .status_not_selected a:after {
color: cyan !important;
content: "Current";
font-family: sans-serif;
font-size: 11px !important;
}
.status_selected a, .status_not_selected a {
color: transparent;
font-size: 0 !important;
}


For the Currently watching link. The original text is on the second code, so it was reduced to 0 and clear, but the after code replaces the text with its own content code and new font settings. If you learn to use Firebug to look at people's CSS you can see how I did it on mine as well.
 
Nov 25, 2013 6:47 PM

Offline
Joined: Jun 2013
Posts: 1438
Do you know how to fix this?
http://oi44.tinypic.com/wleqgo.jpg

The category menu bar below cuts off, and I'm wondering if there's a way you can reposition or resize it
 
Nov 25, 2013 8:32 PM

Offline
Joined: Jan 2012
Posts: 1516
How can I help you without viewing your code?
 
Nov 25, 2013 9:52 PM

Offline
Joined: Jun 2013
Posts: 1438
 
Nov 25, 2013 10:27 PM

Offline
Joined: Jan 2012
Posts: 1516
You need to import the following code into your CSS

/* Setting a position */
#list_surround > table:first-of-type { margin-left: -100px; /* change this value to adjust horizontal menu position */ }
 
Nov 25, 2013 11:07 PM

Offline
Joined: Jun 2013
Posts: 1438
Do I have to add it at a certain place in the CSS or can I just add it in the bottom? Cause it's not changing anything, I even tried typing it up differently to your one
 
Nov 25, 2013 11:17 PM

Offline
Joined: Jan 2012
Posts: 1516
As I said, you can't just paste that code to standard MAL CSS editor. You need to host it on Dropbox or another webhost and then import to MAL CSS editor. Could you give a link to the list you're currently working on?
 
Aug 19, 2014 4:34 AM

Offline
Joined: Jan 2014
Posts: 1297
The code for the black bottom category links is not showing up to my list, while the blue one yes, and I can't figure out why..
Is the code working?
 
Aug 19, 2014 7:10 AM

Offline
Joined: Feb 2010
Posts: 3074
They all are working still when I try them. Maybe you didn't enter the black one right. Also since your list is private, there's no way to test it out with your CSS
 
Dec 31, 2014 8:37 AM

Offline
Joined: Feb 2010
Posts: 3074
Updated this a lot so it works on more browsers and is easier to customize with gradient coloring.