News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Drop down menu

Started by ToxicDocter, August 25, 2020, 03:23:36 AM

Previous topic - Next topic

ToxicDocter

So ive been trying to change the drop down menu from the Dropdown Navbar to a Subnav (Posted a pic). Is there a way to get this?

Antechinus

Sure. That's just presentation. Short version: remove the width restriction on your drop menu, and set the li's to display: inline-block;

That will get you a basic dropline, after which it's just a case of tweaking the eye candy until it looks just how you want it.

Do note that although they're fine on touchscreen, they tend to be a bit of a PITA with a mouse. That's because you have to track around a right angle corner to get to the links, which isn't as natural. You can alleviate this by going with click activation instead of hover, which allows tracking the cursor diagonally straight to the link you want, but it's still a little more awkward.

ToxicDocter

ok where do i go to do that

Antechinus

What theme are you using?

ToxicDocter


Antechinus

Ok, hang on and I'll fire it up on local.

Antechinus

If you add this to the end of index.css it will give you the basics.

.dropmenu {
position: relative;
}
.dropmenu>li {
position: static;
}
.dropmenu li ul {
width: 100%;
box-sizing: border-box;
left: 0;
background: #fff;
border: 1px solid #999;
}
.dropmenu li li {
width: auto;
float: none;
position: static;
display: inline-block;
border: 0;
}
#admin_menu ul ul {
margin: 0;
}

ToxicDocter


Antechinus

Hard refresh your browser.

ToxicDocter

still nothing did it from chrome and internet explorer

ToxicDocter

I got it now was missing a line of code

Antechinus

Good. :)
As I said, this is just basic functionality. Up to you how much eye candy and other trickery you want to add.

ToxicDocter

Will that code work for all themes?

Antechinus

The basic principles should, but different themes may use different structures, classes and id's for their menus. It depends on the whims of the theme's author. So the answer is a maybe, but probably ends up being a no in a lot of cases. But even when it's a no, you can still adapt the idea to work with that theme.

ToxicDocter

could you do possibly one more?

Antechinus


ToxicDocter

its Deception the theme is no longer available tho so idk if you will be able to do it

Antechinus

I'll take a look around.

ToxicDocter

I'm running the theme now I'm my website just can't get the colors right

Antechinus

Can't see any downloads of it anywhere. Do you have a copy of it?

Or just link me to your site. That would work too.

Advertisement: