News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

ToxicDocter

ok where do i go to do that

Antechinus

What theme are you using?
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

ToxicDocter


Antechinus

Ok, hang on and I'll fire it up on local.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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;
}
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

ToxicDocter


Antechinus

Hard refresh your browser.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

ToxicDocter

could you do possibly one more?

Antechinus

Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

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.
Sources code: making easy front end changes difficult since 1873 :P

Mods & Themes | Revamped theme for this site | Dark theme for this site | GitHub for n00bz

Advertisement: