Collective CSS Navigation

Apologies if this question has been asked before, as I am unsure of the terminology to use in my search for resources.

I am attempting to create a tabbed header menu catered to different groups of individuals. Each group will have its own customized menu while still sharing some pages. The goal is to provide intuitive navigation based on the visitor's identity and relevance to the content.

For example:

|   Student   |   Teacher   |   Parents   |
|             ----------------------------|
| Timetable, Homework, Activities ........|


|   Student   |   Teacher   |   Parents   |
|-------------|             |-------------|
| Homework, Schedule .....................|


|   Student   |   Teacher   |   Parents   |
|---------------------------|             |
| Timetable ..............................|

In the above examples, both the Student and Parent menus include a "Timetable" page with identical content (linked to the same URL). However, accessing the Timetable page from the Student tab should display the navigation under the Student tab, and vice versa for the Parent tab.

I plan to differentiate the tabs further with color-coding and potentially add dropdowns to certain items, but I am currently stuck at this initial phase.

Could someone please clarify what this feature is called? Any specific terms I could search for would be greatly appreciated. I am finding my searches thus far to be unfruitful and frustrating :(

Thank you! :)

htmlcssmenu

Answer №1

If you're looking for a solution, one suggestion I can make is this: Firstly, identify who has signed in and create a login window with the desired logic. Allow parents to log in as guests. Next, develop an ASP file with the option to check who is connected and display the appropriate tab. Alternatively, you could implement a choice button/input that uses JavaScript for verification.

For more information on creating select options in HTML, visit w3schools

Take a look at resources like this thread on Stack Overflow for guidance on changing tabs based on HTML select values.

While this may not provide a complete solution, it's a good starting point for your project.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for attaching my navigation bar to the top of the webpage

Can anyone assist me in fixing the top portion of my webpage so that it stays in place? I attempted to use the position:fixed attribute, but this caused issues as my content started overlapping with the fixed divs. You can find my website here: www.croo ...

csslayoutcss-position

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

htmljquerycanvasdrag-and-dropchart.js

Is it feasible to incorporate callbacks in CSS3 animations?

I've been searching for a way to use CSS3 animations with callbacks. Is it possible to animate one element and then trigger the animation of another once the first one is finished? I've spent hours on Google trying to find an answer, but maybe I ...

animationcsscallback

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

Create the design shown below without using the <pre> tag

Creating this pattern using <pre> is straightforward, but I am interested in achieving the same result with <div> Is it possible to do this with margins? I attempted to use margins and was able to achieve success, although some patterns prove ...

htmlcss

What could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5

I'm trying to create a customer slider using the codes provided, but unfortunately, I'm encountering some issues

I'm having trouble creating a slider that pulls all slider data from the database. Here are my codes, but the output is looking strange. I've attached a screenshot of the slider as well. I've tried everything, but I can't seem to figure ...

javascriptphphtmlcssmysql

Achieving CSS responsiveness by transforming the divider from vertical to horizontal when the window is resized

Struggling with creating the footer to match the image? As a beginner in CSS and Bootstrap, I admit I lack expertise in this area. My aim is to replicate the footer design for mobile view only, while having a different layout for desktop. The horizontal pa ...

htmlcsstwitter-bootstrap

How to use jQuery to update the href attribute of a parent link

Can someone help me figure out why I am having trouble changing the 'href' of the parent link to a header logo? Thank you in advance! Here is the HTML code snippet: <a href="https://URL.IWANTO.CHANGE"> <img id="partner_logo" src="/ ...

javascriptjqueryhtml

Is JSDOM able to handle media queries?

I understand that JSDOM may not have all the features of a full-fledged browser, but there is mixed information out there about its CSS support. While I've personally seen it parse CSS, responsive styles don't seem to function as expected. Can an ...

cssunit-testingjsdom

Please reset the form fields after the most recent edit

I've created a form that includes multiple select elements. When an option is selected, it activates the next select element and updates it with values using Ajax and PHP. However, I'm facing an issue where changing a previous option only resets ...

javascriptjqueryhtmlajax

Hiding the visibility of a table-cell will conceal the background color of its parent table row

In my coding project, I have implemented forms with a structure that utilizes display:table-row and display: table-cell. Previously, in Firefox 52, I was able to hide a cell element using visibility:hidden, effectively hiding the cell while maintaining the ...

jqueryhtmlcssfirefox

CSS Word Breaker: Shattering Text into Pieces

Is there a way to prevent long words in the <p> tag from breaking awkwardly in the browser? I attempted to use the CSS property word-break: break-all;, but it seems that Firefox and Opera do not support this feature. Additionally, normal words are al ...

htmlcssword-break

Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div: Here is the complete code snippet: <Grid container spacing={8} alignItems={'stretch' ...

htmlcssreactjsflexboxmaterial-ui

Tips for inserting database table parameters into CSS style

Is there a way to define CSS style parameters in a database table (MySQL) and then use them to style elements such as a menu? Currently, I am aware that we can use variables within styles like this: <div id="content-inner" style="<?php echo $this-&g ...

phphtmlmysqlcss

The background color disappears when viewed on mobile devices

I have created a table using HTML and CSS. The issue is that the background colors of the table display correctly on a desktop, but on a mobile phone, they appear completely transparent while the text remains visible. I am using Bootstrap 4 for this websi ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

htmlreactjstailwind-css

CSS Conflict with jQuery Tools Overlay causing the image to be hidden beneath the overlay

First, let me explain what I am currently using and attempting to achieve: I started with the basic setup for this effect found at flowplayer.org/tools/demos/overlay/index.html Then, I implemented the Apple Leopard Preview Effect from flowplayer.org/tool ...

cssjquery-tools

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

The title tag's ng-bind should be placed outside of the element

When using ng-bind for the title tag inside the header, it seems to produce unexpected behavior. Here is an example of the code: <title page-title ng-bind="page_title"></title> and this is the resulting output: My Page Sucks <titl ...

javascripthtmlangularangular7ng-bind