Forum Settings
Forums

No more scrolling back to the top of a huge list! Use these Fixed Category Menu codes!

New
Apr 20, 2010 11:08 PM
#1

Offline
Feb 2010
11293
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
Shishio-kunDec 31, 2014 8:37 AM
Reply Disabled for Non-Club Members
Feb 2, 2012 12:23 PM
#2

Offline
Nov 2011
304
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:
Shishio-kunJun 19, 2012 10:44 PM
Mar 19, 2012 4:19 AM
#3

Offline
Nov 2011
304
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:
Shishio-kunJun 20, 2012 9:39 PM
Mar 23, 2012 9:52 PM
#4

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

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

Offline
Feb 2010
11293
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.
May 12, 2012 5:14 PM
#7

Offline
Feb 2012
580
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!
May 12, 2012 9:51 PM
#8

Offline
Feb 2010
11293
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.
May 12, 2012 10:37 PM
#9

Offline
Feb 2012
580
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
Feb 2010
11293
Made some changes to these add-ons so they'll look better on more layouts.
Jan 3, 2013 6:25 AM
Offline
Jan 2013
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)
experimentingJan 3, 2013 6:29 AM
Jan 3, 2013 10:31 AM

Offline
Feb 2010
11293
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
Jun 2013
1547
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
Jan 2012
1578
How can I help you without viewing your code?
Nov 25, 2013 9:52 PM

Offline
Jun 2013
1547
Nov 25, 2013 10:27 PM

Offline
Jan 2012
1578
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
Jun 2013
1547
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
Jan 2012
1578
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
Jan 2014
1655
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
Feb 2010
11293
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
Feb 2010
11293
Updated this a lot so it works on more browsers and is easier to customize with gradient coloring.
Reply Disabled for Non-Club Members

More topics from this board

» [BBCODE + VIDEO GUIDE] ⭐️ Full list of BBcodes and BBcode setups on MAL ( 1 2 3 4 )

Shishio-kun - Feb 3, 2012

159 by RackOrRuin »»
51 minutes ago

» [CSS - CLASSIC] Wishes of the heart ~ XXXholic layout by Hahaido

Shishio-kun - Dec 27, 2015

8 by Valerio_Lyndon »»
Apr 12, 7:34 PM

» [CSS-MODERN] ⭐️ Takana_No_Hana's Layouts

Shishio-kun - Jun 5, 2021

6 by NemuSanjou »»
Apr 9, 7:21 PM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1204 by blickrella »»
Apr 9, 4:55 PM

» [MODERN - CSS] ⭐ Sailor Moon layout by 5cm

Shishio-kun - Sep 7, 2020

34 by Y3337 »»
Mar 31, 11:45 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login