I noticed that you included some manual approaches to nav styling in the latest dev.

I used this in a template file with excellent results: (menu blocks only)

function MYTHEME_tree__menu_block( $variables) {
     return '<div class="submenu"><ul class="unstyled nav nav-tabs nav-stacked">' . $variables['tree'] . '</ul></div>';
}

This will be the base awesomesauce for some snazzy things I will be doing with radix_ui. Much cleaner, let's use what bootstrap already provides!

Comments

shadcn’s picture

shadcn commented
Title: Nav! There is a better way. » Add menu_block support
Assigned: Unassigned » shadcn

Looks great. Thanks.

rerooting’s picture

rerooting commented

I should clarify - this works with the menu block module specifically. I plan on building a style plugin very shortly that builds the list in this way, but provides variables that the user defines (pills/tabs, stacked, etc.)

rerooting’s picture

rerooting commented

Ooh and icons. I want to open up a conversation about a generic icon handler for ctools style plugins, theme l(), etc.

rerooting’s picture

rerooting commented

Another issue is that drupal applies active state to menu items via the anchor <a> element, not via the li element that bootstrap desires. We will need to figure out something for this!

I would be interested in applying nav styles universally to menu and menu blocks, however it seems it could make things tricky when you want to do your own thing with a menu or list. At least we could apply unstyled to ul/ol lists that we know want to be unstyled - because the list style reset in the stylesheets is kinda a drag for content typography.

shadcn’s picture

shadcn commented

I was thinking about using a pure css approach rather than having lots of theming hooks / tpl files.

How about using (exploiting?) sass mixin for styling navs, pills..etc?

Then theming a menu would go like this:

.any-menu {
    @include nav-tabs();
}

.another-menu {
    @include nav-pills();
}
rerooting’s picture

rerooting commented

A problem with doing this, at least from what I remember, is that the psuedo selector states will not work. I tried this with the original bootstrap theme and LESS a while back, and while it applies the necessary CSS, it doesn't carry over as simply as a simple class would. Additionally, it adds a lot of bloat to the stylesheets, because this will just repeat that whole chunk of nav and nav-tabs or pills within the .any-menu {} wrapper.

rerooting’s picture

rerooting commented

What I'm working on is a style plugin that lets you just force the nav style you want on any submenu or menu. I haven't committed it to radix ui yet, but I have a solution that works for menu blocks already. In my opinion, theme functions are far more efficient than adding on so much to the stylesheets!

gmclelland’s picture

gmclelland commented

@rerooting - Is this a panels style plugin? I would love to see it. That would be sweet

rerooting’s picture

rerooting commented

GMClelland yes, yes it is. I have another panels style plugin that is more imminently required for a project (carousel) but the menu one will be available later on in the week. I'm pretty new to ctools style plugins, so like other plugins/modules in radix_ui consider it to be very early beta! They are actually very simple to write, but I've been having trouble getting form settings to cary over. Some testing and debugging on the existing radix_ui plugins would be greatly appreciated and help me to move much more quickly on this!

shadcn’s picture

shadcn commented

@rerooting, push your codes, we'll help test it :)

rerooting’s picture

rerooting commented

Quick update:

About to commit to radix ui this week in a big way. Using stylizer module as an example for doing some fancy footwork with ctools plugins and layering pane styles.

Also thought I would mention that the snippet above is wrong:

function MYTHEME_menu_tree__menu_block( $variables) {
     return '<div class="submenu"><ul class="unstyled nav nav-tabs nav-stacked">' . $variables['tree'] . '</ul></div>';
}

you need the _menu after your theme system name because menu_block extends theme_menu_tree or somethin' like that.

mpotter’s picture

mpotter commented

I was thinking about using a pure css approach rather than having lots of theming hooks / tpl files.

Be careful with that approach. To me, one main benefit of using a CSS Framework such as Bootstrap is that you can access functionality simply via adding classes to the HTML markup. So the "Bootstrap way" is to use add classes to the HTML markup in the theme hooks and tpl files, NOT to extend or override classes in CSS/SCSS.

In fact, in the distribution I am working on, it will make heavy use of templates and theme hooks and NOT on heavy CSS modifications. It's important to try and disconnect the "functionality" from the "style". For me, CSS should be used for "style" (colors, fonts, etc) and markup classes should be used for "functionality" (selectors for JS, etc).

So, rather than having:

.any-menu {
    @include nav-tabs();
}

I prefer the
<ul class="unstyled nav nav-tabs nav-stacked">
method described above.

rerooting’s picture

rerooting commented

Indeed, this is what I was saying in #6!

On it...

shadcn’s picture

shadcn commented
Status: Active » Fixed

This is now fixed in the latest dev. Thanks.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.