I am trying to create a menu layout like the one shown in this screenshot. I have been struggling to find an efficient way to style it on my own. Can anyone provide some suggestions or assistance?
I am having trouble figuring out how to code this myself.
To create a stylish design, utilize the pseudo element ::before positioned absolutely inside a relatively positioned LI element. Experiment with borders and radius:
.list {
line-height: 1rem;
list-style: none;
padding: 0;
>li {
position: relative;
align-items: center;
padding: 0.6rem 1rem;
border-left: 1px solid #000;
&::before {
position: absolute;
left: 0;
top: 50%;
content: "";
width: 0.6rem;
border: solid #000;
border-width: 1px 0 0 0;
}
&:first-child {
font-weight: bold;
border-left: 0;
&::before {
height: calc(100% - 1.1rem);
top: 1.1rem;
border-radius: 10px 0 0 0;
border-width: 1px 0 0 1px;
}
}
&:last-child {
border-left: 0;
&::before {
height: calc(100% - 1.1rem);
top: 0rem;
border-radius: 0 0 0px 10px;
border-width: 0 0px 1px 1px;
}
}
}
}<div class="list">
<li>Lorem<br>new-line test</li>
<li>Ipsum</li>
</div>
<div class="list">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</div>
<div class="list">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</div>You can also implement Unicode's Box drawing lines as an alternative option:
.menu {
line-height: 1rem;
list-style: none;
>li {
&::before {
margin-right: 0.5rem;
content: "\2520";
}
&:first-child::before {
content: "\256d";
}
&:last-child::before {
content: "\2570";
}
}
}<div class="menu">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</div>Keep in mind that when using Unicode's Box drawing lines, line wraps or spacing that exceeds line-height of 1 may not be possible.
Lately, I've been brainstorming a new feature where users can upload files such as .pdf or .doc and have them displayed as images on the webpage. I'm curious if there's a way to achieve this without converting them to .jpg or .png using thir ...
I am attempting to generate an array in JavaScript with unique elements extracted from a JSON feed. My thought process is possibly too influenced by PHP, where a simple script like the one below would suffice: $uniqueArray = array(); foreach($array as $ke ...
angular.module('Stations', ['ngRoute']) .config(function ($routeProvider) { $routeProvider .when('/documents/:stationId', { templateUrl: '/Scripts/Modules/checklist/views/index.html', ...
I am currently working on aligning two parallel div boxes, each containing text. The width of these div boxes is not fixed and changes based on a percentage. My challenge is to make the text in the left div box start at the same position as a heading in th ...
Hypothetically, let's consider the following HTML code snippet displayed on a website: <div class="box"> <div class="a1"></div> <div class="a2"></div> <div class="a3" ...
I need to display a tooltip on the button when the search field is empty. Here is what I have attempted: // Enable hover feature const searchBtn = document.querySelector('.find__btn'); searchBtn.addEventListener('mouseover', () => ...
I'm currently integrating modals using Foundation 5 in a Rails application. The issue I'm facing is that the modal only works when the page is not scrolled down. If you scroll to the bottom of the page and try to activate the modal by clicking ...
I'm having trouble understanding why this isn't functioning properly. My goal is to have the data from load.php displayed in the div sample. However, if the code is updated (for example, when pulling information from a database), I want only the ...
Do I really just need to follow these steps to achieve session per request with Ninject? public class WebModule : NinjectModule { public override void Load() { Bind<ISession>().ToMethod(x => MvcApplication.SessionFacto ...
I'm currently working on a webpage that utilizes the openweathermap API to showcase the user's city and local temperature. Unfortunately, I'm encountering an issue where the JSON API is not being processed and nothing is happening. Despite r ...
I'm utilizing DHTMLX for creating a calendar view. Although I have followed the tutorial on the DHTMLX website on how to load the calendar, it's still not displaying the data properly. This is the sample code provided by DHTMLX: function init( ...
Here is a script I have written to extract data from a SQL database: <?php require 'admin-db.php'; // Defining and executing the SQL query $sql = "SELECT `id`, `first_name`, `last_name`, `status_time` " . "FROM `staffs` ORDER BY ...
My database query is retrieving the timestamp of when an item was entered, which I am then echoing back to my main page using PHP. The timestamp is in the format YYYY-MM-DD HH:MM:SS:MS and is displayed correctly in an HTML table. However, when I click on a ...
Debugging issues related to jquery ajax calls to page methods within an ASP.NET application can be challenging, especially when they only occur on a few remote customer's machines. Locally, debugging is simple with tools like Firebug to inspect the r ...
I seem to be encountering an issue while attempting to validate my dynamic HTML form using a PHP script. Upon clicking submit, I receive an error stating that there is an undefined index, even though the index is clearly defined. What sets my query apart f ...
I created a multi-layer map and added a div to it. However, the issue arises when I zoom in on the image, causing the div to change its position unexpectedly. For example, if I place the div over India and then zoom and drag the image, the div ends up in U ...
I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...
My background is causing issues on iOS devices by stretching only when there is content added to a page like this. However, it loads correctly on empty pages like this. I have tried adding background-attachment:scroll instead of background-size: cover to ...
I have a web application built using ASP.NET that allows users to download files from the server. I keep track of the downloads and have restrictions on how many times a file can be downloaded. When users click a button, the following code is executed to ...
My website is not functioning the way I intended. After entering a name and comment, it displays correctly below the comment section. However, upon refreshing the page, the name field becomes null. Github Repository: https://github.com/thebestbestman123/m ...