Main Menu Coding

[Orion 33]

So there's this really nice forum menu on In Dire Straits (please take a look) and I'd love to do something similar with the tabs / hovering. Since I'm new to HTML coding, I would LOVE some advice.  How would I go about a header w/ tabs + how could I possibly make it responsive for mobile?

Edited March 28, 2019 by Orion

[Kit the Human 759]

The way you've asked your question makes me think that you're interested in learning, rather than just a copy pasta. So I've framed my answer with that in mind and given you some resources that I've found useful.

 

You're welcome to pick apart and edit this template 

it's responsive. 

 

To improve it (and to critique my own work XD) I would add the following to the CSS after @media only screen and (max-device-width: 480px) {

 

.tabbedholder label {
    width: 100%;
}

and get rid of the following

.trow1.middle > div {
    width: 100%;
}

I'm not sure what problem I was trying to solve with that!

 

From there it's just a matter of picking your colours. 

 

I don't actually do anything special in the coding (besides what I mentioned above) for the tabs and the tab content to be mobile responsive. A lot of theme makers for RP would find their work is much more responsive if they just refrained from putting fixed widths on everything.

 

There is a nod towards responsiveness with the columns however. The code is split into three columns with the following classes: trow1 flex, trow1 middle and trow1 right

 

trow1 flex contains the tabs and tab content

trow1 middle contains the staff images

trow1 right contains the links

 

These three columns sit side by side because of flexing. This is the code in particular:

 

.tborder.flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin: 5px 30px 15px 30px;
	width: auto;
}

And then I put a width on the tabbed  content because I wanted it to take up half the space

.trow1.left {
	width: 50%;
}

I've also added this:

.trow1.right {
	display: flex;
	flex-grow: 2;
}

Which is saying that .trow1.right (the links) should take up twice the space as the staff images, where available. 

 

When it's on a small screen however, I want those columns to become rows. I've done that by adding this 

.tborder.flex {
		flex-wrap: wrap;
	}

and this

.tborder.flex > .trow1.left {
		flex-basis: 100%;
		flex-grow: 2;
		margin-bottom: 5px;
	}

after @media only screen and (max-device-width: 480px) {

 

What it means is: when the screen is less than 480px wide, the contents of .tborder.flex (the columns) must be able to sit one after another, rather than trying to force them to share space on one line. That's what flex-wrap: wrap means.

 

Then I've added that I want .trow1.left to take up the full width and grow to fill any available space. Earlier I had told it to only take up half the available space.

 

You can read about flex here.

 

But essentially, the actual tabs do not need any special coding beyond telling them to take up the full width when they're on a smaller screen.

 

To set your site up to be responsive however, you need to add the following into your head template (before </head>)

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Old w3 schools breaks it down far better than I can. (But I also hope you find those two resources helpful for your own learning!)

 

Oh and the actual tabbed content works by hiding all of the content boxes. And then telling them to display when the corresponding tab is selected. The ~ is just a child combinator. Very useful short cut to select the correct element without having to give it a class or an id. You can also just use a script for the tabs, check out memoria's code! It's also responsive 🙂

 

I hope this wall of text was useful....

[Orion 33]

Yes, I'm VERY interested in learning. I'll take a look at these and get back to you in a bit. <33