Menu pal onder de header (zoals dit forum heeft) in prosilver?

[Hans_380]

Besten,

Na een joekel van een opwaardering draait het forum waar ondergetekende een beheerders van is inmiddels netjes op phpBB 3.2.0, PHP7.0 en template prosilver. De extensies Tapatalk, ReIMG en S9E werken zoals beraamd en op wat detailwerk na kan de tent er nu weer fijn tegenaan.

Zodoende zijn we nu met de nice-to-haves verdergegaan. Aangezien ColorizeIt het niet meer doet voor phpBB 3.2 zullen we zelf handmatig aan de slag moeten om de styling en kleuren beter overeen te laten komen met die van de andere sites binnen het conglomeraat.
De header moet ook nog aangepast worden en daar ging ons het idee op om die meteen van een menubalk te voorzien. Boven bijvoorbeeld dit forum van phpBB Nederland staat onder de header een strakke menubalk waar naar externe links verwezen wordt (phpBB, Forums, Downloads, Documentatie). Zo'n menu lijkt ons bijzonder handig omdat het de kans biedt de verschillende sites met eigen URL's (en een netkaart) goed met elkaar te integreren.

Ik heb alleen geen idee hoe je zo'n menu kan aanbrengen in 3.2. en het daarna stylen kan (achtergrond, mouseover, dat soort dingen). In de oude topics kom ik er weinig over tegen, behalve discussies over instellingen die een ander soort menu creëeren.

Kan iemand ons advies geven over hoe we dit aan moeten pakken en/of is er misschien een snippet code bij de hand waarmee een menu zoals die hierboven in dit forum te creëeren valt?

Groeten,
Hans
www.hoogspanningsforum.com

[El torro]

Je plakt in de overall_header.html zoiets

Code: Selecteer alles

<div class="hmenu"> 
<ul> 
  <li><a href="./memberlist.php?mode=contactadmin" >Contact</a></li>
  <li><a href="/link1" >tekst1</a></li> 
  <li><a href="/link2" >tekst2</a></li> 
			
</ul>   
			</div>

En dan ergens in een css file

Code: Selecteer alles

/* begin aangepaste css jb*/
 /* navigatie bar */ 
.hmenu { 
   padding: .3em 0 .3em 0; 
   background: #FFFFFF; 
   border-radius: 5px
} 

.hmenu ul { 
   list-style: none; 
} 

.hmenu ul li { 
   display: inline; 
} 

.hmenu ul a:link{ 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: small;  
} 

.hmenu ul a:hover{ 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: small; 
   color: #f6f0cc; 
   background-color: #0f8147; 
   border-radius: 5px
}
/* einde aangepaste css jb*/

[Hans_380]

Ah, dat lijkt mee te vallen. Dank, hier kan ik wel wat mee.

Maakt het overigens nog iets uit waar precies in overall_header.html dat stuk code kan worden geplakt? En is er nog een vereiste aan waar dat bestand in kan worden gezet? (Hoewel de class mooi teruggrijpt op hmenu in het CSS-bestand, neem ik aan dat het stuk code alleen zinvol een CSS-bestand kan aanroepen als die in de subdirectory staat waar hij in zoekt. Kan dat gewoon rechtstreeks in de template-map van prosilver?)

[El torro]

Ik heb de css toegevoegd bovenaan de colors.css maar je bent daar vrij in, je kan ook een eigen css file aanroepen als je dat liever doet.
Wel in de overall_header.html die css aanroepen uiteraard

Ik heb de code toegevoegd na

Code: Selecteer alles

{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
		</div>

Wat dit resultaat geeft

www.zonstraal.be/forum/

Overigens kun je gewoon in de broncode van de betreffende website kijken waar alle code staan.

[Hans_380]

Vanwege werkzaamheden, geen goede machine voorhanden en net iets te mooi weer op zondag, kwam het er pas vandaag van om een en ander uit te proberen in de code op de manier zoals hierboven uitgelegd, inclusief de gesuggereerde blik in de broncode. En jawel, het werkt.

Een fraaie toegevoegde waarde waar we erg blij mee zijn, ook vanwege toekomstige expansie en het aaneen smeden van het geheel van drie domeinen.
Nu nog even wat stoeien met de exacte CSS en de weergave in mobiele toepassingen, maar in hoofdzaak is het nu uitstekend in orde.

Hartelijk dank richting El Torro voor de hulp.

[Jim]

Als ik nog een tip mag geven, in een paar links in jouw menu zijn de links niet helemaal correct, ze linken namelijk naar een ",com" domein in plaats van een ".com" domein, daardoor werken ze op dit moment niet.

[Hans_380]

Tikje late reactie, maar beter laat dan nooit.
Jim, dank. Een paar andere gebruikers hadden me er ook al op gewezen. Op mijn Noorse toetsenbord zitten de punt en de komma op net iets andere plekken dan op een standaard Amerikaans exemplaar. Voor je het weet staat de ringvinger dan op een ander karakter.

In elk geval, het menu werkt nu correct en ziet er precies zo uit als beraamd. Perfect en dank beiden voor de ondersteuning.

[Froddelaar]

Ik heb er net 1tje toegevoegd op mijn forum.
https://www.froddelpower.be
"Responsive" met javascript.

Code: Selecteer alles

<!-- Menubar in de header -->
<div class="menubarheader" id="MyMenuBarHeader">
  <a href="https://www.froddelpower.be"><i class="fa fa-home"></i> Home</a>
  <a href="https://www.froddelpower.be/index.php"><i class="fa fa-pencil-square-o"></i> Forum</a>
 <!-- IF S_DISPLAY_ARCADE_LINK -->
  <a href="{U_ARCADE}"><i class="fa fa-gamepad"></i> {L_ARCADE}</a>
<!-- ENDIF --> 
  <a href="https://www.froddelpower.be/kb/index"><i class="fa fa-briefcase"></i> {L_KNOWLEDGEBASE}</a>
  <a href="https://www.froddelpower.be/rules"><i class="fa fa-exclamation-circle"></i> {L_BOARDRULES}</a>  
  <a href="https://www.froddelpower.be/contactadmin"><i class="fa fa-at"></i> Contact</a>
  <a href="javascript:void(0);" class="icon" onclick="responsivefunctie()">&#9776;</a>
</div> 

<script>
/* Wissel tussen het toevoegen en verwijderen van de "responsive" klasse op de menubarheader wanneer een gebruiker op het icoon klikt */
function responsivefunctie() {
    var x = document.getElementById("MyMenuBarHeader");
    if (x.className === "menubarheader") {
        x.className += " responsive";
    } else {
        x.className = "menubarheader";
    }
} 
</script>


<style>
 /* Add a black background color to the top navigation */
.menubarheader {
    background-color: #333;
    overflow: hidden;
	border-radius: 8px;
}

/* Style the links inside the navigation bar */
.menubarheader a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 6px 6px;
    text-decoration: none;
    text-shadow: 2px 4px 3px #898989;
    font-size: 14px;
	font-family: "Comic Sans MS", cursive, sans-serif;
}

/* Change the color of links on hover */
.menubarheader a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the menubarheader on small screens */
.menubarheader .icon {
    display: none;
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the menubarheader (.icon) */
@media screen and (max-width: 600px) {
  .menubarheader a:not(:first-child) {display: none;}
  .menubarheader a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the menubarheader with JavaScript when the user clicks on the icon. This class makes the menubarheader look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .menubarheader.responsive {position: relative;}
  .menubarheader.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menubarheader.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
<!-- Menubar in de header -->