hoofdmenu

ik heb een thema gedownload en geïnstalleerd. maar het menu is geen dropdownmenu.
graag had ik een dropdownmenu gehad. ik heb al een dropdownmenu op een andere site, maar ik vind niet waar ik de code moet halen.

in mijn page--front.html.twig file vind ik de volgende code

{% if page.navigation or page.navigation_collapsible %}
{% block navbar %}

{{ page.navigation }}
{# .btn-navbar is used as the toggle for collapsed navbar content #}
{% if page.navigation_collapsible %}

{{ 'Toggle navigation'|t }}

{% endif %}
Logo Zaalvoetbalclub ZC Brugge

{# Navigation (collapsible) #}
{% if page.navigation_collapsible %}

{{ page.navigation_collapsible }}

{% endif %}
{% endblock %}
{% endif %}

ik snap dat deze code de navigatiebar beheert. ik snap alleen niet naar wat bv {{ page.navigation_collapsible }} refereert. Ik denk dat dit dus wel degelijk het navigatiemenu is met home-teams-kalender...
maar waar staat de code die dit alles genereerd?

misschien zoek ik verkeerd. ik wil gewoon weten waar ik de code kan vinden om van dit menu een uitklapmenu te maken zodanig dat als je met je muis over een tabblad gaat dat het menu dan uitklapt.

het gaat om de site http://zvvcerclebrugge.be/ZCBrugge/
het soort menu dat ik wil bereiken is zoals op deze site http://zvvcerclebrugge.be

Drupalversie: 
8.x
Auteur: 
Karel08
afbeelding van Niek Kloots
Door Niek Kloots op 23 augustus, 2020 - 14:23

Je zal iets van Superfish in moeten bouwen in je thema d.m.v. een JQuery plugin o.i.d.

Kijk bijv. bij het thema Danland hoe ze dat gedaan hebben.

http://familiekloots.nl
hobby: https://dldsa.nl

Door Karel08 op 27 augustus, 2020 - 22:53

ik heb via superfish en wat css al redelijk wat kunnen doen met mijn hoofdmenu,

ik wou mijn menu rechts laten staan, ik heb dat op een of andere manier voor elkaar gekregen met float, maar helaas staat nu de text in mijn dropdown ook rechts uitgelijnd. ik kon het links laten uitlijnen door op een andere manier het menu rechts te zetten, namelijk door position relative en dan right:0px;
maar dan gaat de lijn onder elke tab niet over de volle lengte.

kan iemand mij helpen om dit menu rechts te laten staan, de in dropdow de tekst links uitlijnen, en de lijn onder elke dropdowntab over de volle lengte te laten lopen?

www.zvvcerclebrugge.be/ZCBrugge
dit is mijn css van superfisch
.block-superfish {
width: 100%;
}
.sf-hidden {
background: transparent !important;
border: 0 none !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px !important;
margin-right: 0px;
overflow: hidden !important;
padding: 0 !important;
width: auto !important;
float: left;
}
ul.sf-menu,
ul.sf-menu li {
list-style: none;
}
ul.sf-menu,
ul.sf-menu ul,
ul.sf-menu ol,
ul.sf-menu li,
ul.sf-menu a,
ul.sf-menu span,
ul.sf-menu div {
position: relative;
float: right;
margin: 0;
padding: 0;
width: auto;
background:#000000;
}
ul.sf-menu {
line-height: 1.0;
z-index: 497;
}

ul.sf-menu ul {
left: 0;
position: absolute;
top: -9999px;

}

/*width dropdown//////////////////////////////////////////////*/
ul.sf-menu ul li {
width: 100%;
border-bottom: 10px solid #262626;
}
ul.sf-menu li {
float: left;
position: relative;
z-index: 498;
}
ul.sf-menu a,
ul.sf-menu span.nolink {
display: block;
padding: 8px;
position: relative;
}
ul.sf-menu li:hover,
ul.sf-menu li.sfHover,
ul.sf-menu li:hover ul,
ul.sf-menu li.sfHover ul {
z-index: 499;
}
ul.sf-menu li:hover > ul,
ul.sf-menu li.sfHover > ul {
left: 0;
top: 84px;
}
ul.sf-menu li li:hover > ul,
ul.sf-menu li li.sfHover > ul {
left: 12em;
top: 0;
}
ul.sf-menu.menu,
ul.sf-menu.menu ul,
ul.sf-menu.menu li {
margin: 0;
}
/**
* Arrows.
*/
ul.sf-menu .sf-with-ul {
padding-right: 3em;
}
ul.sf-menu .sf-sub-indicator {
height: 12px;
line-height: 9999px;
opacity: 0.75;
overflow: hidden;
position: absolute;
right: 0.75em;
speak: none;
text-indent: -9999px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 12px;
}
ul.sf-menu .sf-sub-indicator:after {
content: "▼";
left: 0;
line-height: 1;
position: absolute;
text-indent: 0;
top: 0;
}
ul.sf-menu ul .sf-sub-indicator:after {
content: "►";
}
ul.sf-menu a:focus > .sf-sub-indicator,
ul.sf-menu a:hover > .sf-sub-indicator,
ul.sf-menu a:active > .sf-sub-indicator,
ul.sf-menu li:hover > a > .sf-sub-indicator,
ul.sf-menu li.sfHover > a > .sf-sub-indicator,
ul.sf-menu span.nolink:hover > .sf-sub-indicator,
ul.sf-menu li:hover > span.nolink > .sf-sub-indicator,
ul.sf-menu li.sfHover > span.nolink > .sf-sub-indicator {
opacity: 1;
}
/**
* Shadow.
*/
ul.sf-menu.sf-horizontal.sf-shadow ul,
ul.sf-menu.sf-vertical.sf-shadow ul,
ul.sf-menu.sf-navbar.sf-shadow ul ul {
-webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
ul.sf-menu.sf-shadow ul.sf-shadow-off {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/**
* Multi-column sub-menus.
* Supersubs.js can adjust column widths too and this is a fallback.
*/
ul.sf-menu li.sf-multicolumn-column {
display: inline;
float: left;
}
ul.sf-menu li.sf-parent-children-1 ul.sf-multicolumn {
width: 12em;
}
ul.sf-menu li.sf-parent-children-2 ul.sf-multicolumn {
width: 24em;
}
ul.sf-menu li.sf-parent-children-3 ul.sf-multicolumn {
width: 36em;
}
ul.sf-menu li.sf-parent-children-4 ul.sf-multicolumn {
width: 48em;
}
ul.sf-menu li.sf-parent-children-5 ul.sf-multicolumn {
width: 60em;
}
ul.sf-menu li.sf-parent-children-6 ul.sf-multicolumn {
width: 72em;
}
ul.sf-menu li.sf-parent-children-7 ul.sf-multicolumn {
width: 84em;
}
ul.sf-menu li.sf-parent-children-8 ul.sf-multicolumn {
width: 96em;
}
ul.sf-menu li.sf-parent-children-9 ul.sf-multicolumn {
width: 108em;
}
ul.sf-menu li.sf-parent-children-10 ul.sf-multicolumn {
width: 120em;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(1) {
width: 50%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(1) {
width: 32.333%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(1) {
width: 25%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(1) {
width: 20%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(6),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(1) {
width: 16.665%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(7),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(6),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(1) {
width: 14.2855%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(8),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(7),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(6),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(1) {
width: 14.2855%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(9),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(8),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(7),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(6),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(9):nth-last-child(1) {
width: 11.111%;
}
ul.sf-menu li.sf-multicolumn-column:nth-child(1):nth-last-child(10),
ul.sf-menu li.sf-multicolumn-column:nth-child(2):nth-last-child(9),
ul.sf-menu li.sf-multicolumn-column:nth-child(3):nth-last-child(8),
ul.sf-menu li.sf-multicolumn-column:nth-child(4):nth-last-child(7),
ul.sf-menu li.sf-multicolumn-column:nth-child(5):nth-last-child(6),
ul.sf-menu li.sf-multicolumn-column:nth-child(6):nth-last-child(5),
ul.sf-menu li.sf-multicolumn-column:nth-child(7):nth-last-child(4),
ul.sf-menu li.sf-multicolumn-column:nth-child(8):nth-last-child(3),
ul.sf-menu li.sf-multicolumn-column:nth-child(9):nth-last-child(2),
ul.sf-menu li.sf-multicolumn-column:nth-child(10):nth-last-child(1) {
width: 10%;
}
/**
* "Vertical" type.
*/
ul.sf-menu.sf-vertical {
width: 12em;
}
ul.sf-menu.sf-vertical li {
width: 100%;
}
ul.sf-menu.sf-vertical li:hover > ul,
ul.sf-menu.sf-vertical li.sfHover > ul {
left: 12em;
top: 0;
}
ul.sf-menu.sf-vertical .sf-sub-indicator:after {
content: "►";
}
/**
* "Navbar" type.
*/
ul.sf-menu.sf-navbar {
position: relative;
}
ul.sf-menu.sf-navbar li {
position: static;
}
ul.sf-menu.sf-navbar li li {
position: relative;
}
ul.sf-menu.sf-navbar li ul,
ul.sf-menu.sf-navbar li li li {
width: 100%;
}
ul.sf-menu.sf-navbar li li {
width: auto;
float: left;
}
ul.sf-menu.sf-navbar li li:hover > ul,
ul.sf-menu.sf-navbar li li.sfHover > ul,
ul.sf-menu.sf-navbar > li.active-trail > ul {
left: 0;
top: 2.5em;
}
ul.sf-menu.sf-navbar li li li:hover > ul,
ul.sf-menu.sf-navbar li li li.sfHover > ul {
left: 12em;
top: 0;
}
ul.sf-menu.sf-navbar ul .sf-sub-indicator:after {
content: "▼";
}
ul.sf-menu.sf-navbar ul ul .sf-sub-indicator:after {
content: "►";
}
/**
* sfSmallscreen.
*/
ul.sf-menu.sf-accordion {
display: none;
position: absolute;
}
ul.sf-menu.sf-accordion,
ul.sf-menu.sf-accordion ul,
ul.sf-menu.sf-accordion li {
float: left;
width: 100%;
}
ul.sf-menu.sf-accordion ul {
margin: 0;
padding: 0;
}
ul.sf-menu.sf-accordion.sf-expanded,
ul.sf-menu.sf-accordion li.sf-expanded > ul {
left: auto !important;
position: relative;
top: auto !important;
}
ul.sf-menu.sf-accordion .sf-sub-indicator:after {
content: "▼";
}
ul.sf-menu.sf-accordion.sf-accordion-with-buttons .sf-accordion-button:after {
content: "▼";
margin: 0 0 0 1em;
}
ul.sf-menu.sf-accordion.sf-accordion-with-buttons li.sf-expanded > .sf-accordion-button:after {
content: "▲";
}
/**
* RTL support.
*/
ul.sf-menu.rtl,
ul.sf-menu.rtl li {
float: right;
}
ul.sf-menu.rtl li:hover > ul,
ul.sf-menu.rtl li.sfHover > ul {
left: auto;
right: 0;
}
ul.sf-menu.rtl li li:hover > ul,
ul.sf-menu.rtl li li.sfHover > ul {
left: auto;
right: 12em;
}
ul.sf-menu.rtl ul {
left: auto;
right: 0;
}
ul.sf-menu.rtl .sf-sub-indicator {
left: 0.75em;
right: auto;
}
ul.sf-menu.rtl.sf-horizontal ul .sf-sub-indicator:after {
content: "◄";
}
ul.sf-menu.rtl.sf-horizontal.sf-shadow ul,
ul.sf-menu.rtl.sf-vertical.sf-shadow ul,
ul.sf-menu.rtl.sf-navbar.sf-shadow ul ul {
-webkit-box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
-moz-box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
box-shadow: -2px 2px 10px rgba(0,0,0,0.5);
}
ul.sf-menu.rtl li.sf-multicolumn-column {
float: right;
}
ul.sf-menu.rtl.sf-vertical li:hover > ul,
ul.sf-menu.rtl.sf-vertical li.sfHover > ul {
left: auto;
right: 12em;
}
ul.sf-menu.rtl.sf-vertical .sf-sub-indicator:after {
content: "◄";
}
ul.sf-menu.rtl.sf-navbar li li {
float: right;
}
ul.sf-menu.rtl.sf-navbar ul ul .sf-sub-indicator:after {
content: "◄";
}
ul.sf-menu.rtl.sf-navbar li li:hover > ul,
ul.sf-menu.rtl.sf-navbar li li.sfHover > ul {
left: auto;
right: 0;
}
ul.sf-menu.rtl.sf-navbar li li li:hover > ul,
ul.sf-menu.rtl.sf-navbar li li li.sfHover > ul {
left: auto;
right: 12em;
}
ul.sf-menu.rtl.sf-accordion.sf-expanded,
ul.sf-menu.rtl.sf-accordion li.sf-expanded > ul {
right: auto !important;
}
/* dropdown menu */

.sf-depth-2 a:hover {
color: #fff;
}

.sf-depth-2 > a:hover:before {
display: block !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1% !important; /* de breedte van de onderlijning */
height: 18px !important; /* de hoogte van de onderlijning */
background: #cd2122; /* de kleur van de onderlijning */
content: "" !important;
transition: width 0.2s !important;
margin-top: 10px;
}

Grts

afbeelding van jo.w
Door jo.w op 28 augustus, 2020 - 23:04

Ga niet in bestaande css-files van je theme en/of module wijzigingen aanbrengen, bij een update kan je herbeginnen.
Installeer de module Asset Injector (D8) of CSS Injector (D7).

In de meeste browsers kan je trouwens via "element inspecteren" kijken welke css-regels het uitzicht van een element bepalen en je kan daar ook wijzigingen uitproberen. Zolang je je pagina niet vernieuwd blijven ze zichtbaar.

Jo

Bookmark and Share

Drupal is een geregistreerd merk van Dries Buytaert. | Powered by Pantheon.

Drupal.be/Drupal.nl is de website van de Nederlandstalige Drupalgemeenschap.

onomatopee