MyAnimeList.net

Forums

Recent Posts | My Watched Topics | My Ignored Topics | Search

No more scrolling back to the top of a huge list! Use these Fixed Category Menu codes!
MyAnimeList.net Forum »» Club Discussion »» Shishio's Custom Lists & Profiles (with layouts, tutorials, and more!) AUGUST CARD FESTIVAL! PERSONALIZED TCG CARDS ARE BACK! »» 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
04-20-10, 11:08 PM

Offline
Joined: Feb 2010
Posts: 2320
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:


I've tested this on many layouts and it works for them but there may still be bugs in it, so if you have any problems let me know so I can work them out. It works best on the beginner style layouts but on others it might not work so well. Also, Veriti added some awesome alternative codes in the posts below. Just add them to your CSS easily!

The code
Modified by Shishio-kun, 11-19-12, 1:46 PM
 
#2
02-02-12, 12:23 PM

Offline
Joined: Nov 2011
Posts: 244
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, 06-19-12, 10:44 PM
 
#3
03-19-12, 4:19 AM

Offline
Joined: Nov 2011
Posts: 244
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, 06-20-12, 9:39 PM
 
#4
03-23-12, 9:52 PM

Offline
Joined: Mar 2009
Posts: 164
Nice Shishio! Thanks! :D
 
#5
03-27-12, 7:16 AM

Offline
Joined: Oct 2008
Posts: 4970
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
03-27-12, 11:39 AM

Offline
Joined: Feb 2010
Posts: 2320
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
05-12-12, 5:14 PM

Offline
Joined: Feb 2012
Posts: 641
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
05-12-12, 9:51 PM

Offline
Joined: Feb 2010
Posts: 2320
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
05-12-12, 10:37 PM

Offline
Joined: Feb 2012
Posts: 641
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!
 
06-19-12, 10:58 PM

Offline
Joined: Feb 2010
Posts: 2320
Made some changes to these add-ons so they'll look better on more layouts.
 
01-03-13, 6:25 AM

Offline
Joined: Jan 2013
Posts: 7
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, 01-03-13, 6:29 AM
 
01-03-13, 10:31 AM

Offline
Joined: Feb 2010
Posts: 2320
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.
 
11-25-13, 6:47 PM

Offline
Joined: Jun 2013
Posts: 1542
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
ciggy butt brain
 
11-25-13, 8:32 PM

Offline
Joined: Jan 2012
Posts: 1324
How can I help you without viewing your code?
 
11-25-13, 9:52 PM

Offline
Joined: Jun 2013
Posts: 1542
ciggy butt brain
 
11-25-13, 10:27 PM

Offline
Joined: Jan 2012
Posts: 1324
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 */ }
 
11-25-13, 11:07 PM

Offline
Joined: Jun 2013
Posts: 1542
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
ciggy butt brain
 
11-25-13, 11:17 PM

Offline
Joined: Jan 2012
Posts: 1324
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?
 
08-19-14, 4:34 AM

Offline
Joined: Jan 2014
Posts: 759
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?
 
08-19-14, 7:10 AM

Offline
Joined: Feb 2010
Posts: 2320
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
 
Top
Help     FAQ     About     Contact     Terms     Privacy     AdChoices