When the website loads, I expected the navbar to have a certain design. However, I encountered an issue where I couldn't set the button's state as clicked.
If you are curious about the output I achieved, you can watch it in video format here:
Here is how the navbar was supposed to look like: https://i.sstatic.net/PRdrq.png
And here is another image for reference: https://i.sstatic.net/7yRZS.png
One way to achieve this effect is by using input radio buttons. The radio button that is checked will have a colored bottom border.
Note: FontAwesome icons are being used for the menu icons. Check out FontAwesome for more information.
.menu {
display: block;
}
.menu .menu-item {
cursor: default;
display: inline;
}
.menu .menu-item [type="radio"] {
position: absolute;
left: -100vw;
}
.menu .menu-item [type="radio"]:checked ~ label {
border-bottom: 4px solid #080;
}
.menu .menu-item label {
border-bottom: 4px solid transparent;
cursor: pointer;
display: inline-block;
padding: 4px 8px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" rel="stylesheet"/>
<div class="menu">
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemDashboard" value="Dashboard" checked>
<label for="MenuItemDashboard"><span class="fa fa-tachometer-alt"></span> Dashboard</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemClasses" value="Classes">
<label for="MenuItemClasses"><span class="fa fa-chalkboard"></span> Classes</label>
</div>
<div class="menu-item">
<input type="radio" name="MenuItem" id="MenuItemTimeTable" value="TimeTable">
<label for="MenuItemTimeTable"><span class="fa fa-calendar-alt"></span> Time Table</label>
</div>
</div>I came across a helpful tutorial on utilizing React with Firebase for a basic task of storing text field data in a database. However, I am facing challenges in converting it to utilize Hooks. There seems to be a scarcity of tutorials on using Hooks + Fireb ...
I have successfully integrated multiple markers on a Google Map. Now, I am looking to add specific content for each marker. While coding everything in strings works fine, I encountered an issue when trying to load React elements inside those strings. For ...
Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...
I'm still in the process of learning how to code, so please bear with me. I am attempting to create a navigation bar that, on desktop, will be displayed horizontally on the right side of the screen. However, when viewing on a device smaller than 800px ...
Currently, I am working on managing a simple form using JQuery for DOM manipulation. Below is the code snippet: var username = $('#username').val(); var email = $('#email').val(); var pass = $('#pass').val(); $('#signup ...
I am looking for a way to enhance the appearance of my <div> contents when my website loads. They should gradually appear one after the other as the website loads. Additionally, the background image should load slowly due to being filtered by the wea ...
As a beginner delving into Angular, I find myself working with a multiple select feature to filter a list by name. <select multiple ng-options="data.name for data in datas" ng-model="filterData"> </select> Currently, I am able to filter with ...
<table> <thead> <tr> <th>First</th> <th>Second</th> <th></th> </tr> </thead> <tbody> <tr> <td>Data1</td> <td>Dat ...
In the given scenario, I am looking to achieve a function where each time the add button is clicked, the content within the template div should be appended to the element with the landingzone class. Additionally, it is important that the NEWID changes for ...
Hello, I am new to ReactJS and currently using it along with ReactDataGrid. I am trying to figure out how to change the real DOM value of a specific cell in the table. Here is the table I am working with: https://i.sstatic.net/CAcSH.png My goal is to cha ...
I encountered an issue when attempting to transfer my React website from my local computer to a server running Ubuntu 18.04. The problem arises when I run the yarn install command, as errors are being generated. Node version: v12.13.0 Yarn version: v1.19. ...
There was an issue in the node_modules/@prisma/client/runtime/library.d.ts file on line 1161, specifically error TS1005 where a '?' was expected. 1161 | select: infer S extends object; | ^ 1162 | } & R ...
As I delved into using expo for my app development journey, I discovered that there are two distinct approaches to building an application. Upon running the command: expo init test I was presented with a choice between two templates: Choose a template: ...
I have recently completed designing and developing a new website, which you can visit here. However, I am currently facing an issue with the positioning of the "About Us" image when accessing the site on either a tablet or a mobile device. Strangely enou ...
I am working with a classic bootstrap accordion in my code. I want to adjust the width of the expanded ul/li elements when a h5 element is clicked (decrease width). Currently, the width expands fully when the h5 element is clicked. Can anyone provide ass ...
Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...
I have a Geolocation.js file that retrieves the geolocation data and logs it to the console. This file is imported into an index.js file and I need to use the lat and lng values that are logged to replace the hardcoded values in the ll parameter in the fol ...
I'm currently in the process of learning Vue.js. This is my first attempt at creating a small to-do application, and I am encountering issues with deleting each individual task upon clicking. Despite watching multiple YouTube tutorials, I have not bee ...
I am currently having an issue with navigating to the home page after submitting a form in Bootstrap. Although I have successfully implemented an alert message upon submission, the page does not redirect to the home page as expected. Instead, it redirects ...
Let me provide more details for better understanding. Currently, the website is not operational yet. Once it's live, I'll be hosting it on a platform like YouTube. The issue I encountered was when trying to embed a video using the code below: & ...