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


Antechinus

  #topnav li {
    position: static;
  }
  #topnav li ul {
    position: absolute;
    width: 40em;
    left: 0;
  }
  #topnav li li, #topnav li:hover li {
    float: none;
    width: 220px;
    display: inline-block;
  }
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

@rjen

Running SMF 2.1 with latest Tinyportal at www.fjr-club.nl
Testing SMF 2.1 with next version Tinyportal at test.fjr-club.nl

Arantor

I also like the dirty hack to remove index.php from the URL guaranteeing that first time users are served with no theme.
No good deed goes unpunished / All helpful urges should be circumvented

I have something to say: it's better to burn out than to fade away. There can be only one.

@rjen

Quote from: Arantor on August 25, 2020, 06:43:18 AM
I also like the dirty hack to remove index.php from the URL guaranteeing that first time users are served with no theme.

Ha, I was wondering why that happened... yuck.
Running SMF 2.1 with latest Tinyportal at www.fjr-club.nl
Testing SMF 2.1 with next version Tinyportal at test.fjr-club.nl

Arantor

Yup, if you hack QueryString.php to change the definition of $scripturl to not have index.php in it, this happens. The mod which does it does this too, which is why I kept asking for it to be removed.
No good deed goes unpunished / All helpful urges should be circumvented

I have something to say: it's better to burn out than to fade away. There can be only one.

ToxicDocter

Quote from: @rjen on August 25, 2020, 07:29:13 AM
Quote from: Arantor on August 25, 2020, 06:43:18 AM
I also like the dirty hack to remove index.php from the URL guaranteeing that first time users are served with no theme.

Ha, I was wondering why that happened... yuck.
Thanks for letting me know about that and the copyright i was messing around in the template

ToxicDocter

Quote from: Antechinus on August 25, 2020, 06:04:50 AM
  #topnav li {
    position: static;
  }
  #topnav li ul {
    position: absolute;
    width: 40em;
    left: 0;
  }
  #topnav li li, #topnav li:hover li {
    float: none;
    width: 220px;
    display: inline-block;
  }

I combined the 2 and added a subnav is there stuff thats not needed in there?


}
.dropmenu {
   position: relative;
}
.dropmenu>li {
   position: static;
}
.dropmenu li ul {
width: 100%;
box-sizing: border-box;
left: 0;
border: 1px solid #999;
}
.dropmenu li li {
   width: auto;
   float: none;
   position: static;
   display: inline-block;
   border: 0;
}
#admin_menu ul ul {
   margin: 0;
}
  #subnav {
   position: fixed;
   float: left;
   overflow: hidden;
  }
  #topnav li {
   position: static;
}
  #topnav li ul {
    box-sizing: border-box;
    width: 100%;
    left: 0;
    border: 1px solid #999;
  }
  #topnav li li, #topnav li:hover li {
    float: none;
    width: auto;
    position: static;
    display: inline-block;
    border: 0;
  }
   margin: 0;
}

Kindred

not sure what this is
Quote
Copyright © 2020 Simple Machines. All Rights Reserved.

We don't own a copyright to anything on your site...  only to the software.   So adding that line is improper.
Quote
SMF 2.0.17 | SMF © 2019, Simple Machines

this is the only copyright that we expect to see.
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

ToxicDocter

ok thanks i changed it so hopefully its good now

Kindred

why do you have anything manually in there at all?

the automatic copyright notice was restored and is displayed... you don't need a manual one as well.
Слова
Украина

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Advertisement: