I am looking to design a website where users can open sidepanes from both the left and right sides. I am not proficient in JavaScript and would prefer a solution using only CSS and HTML. While browsing, I came across a website that achieves what I want through JavaScript:
Are there any recommendations for similar solutions without relying on JavaScript?
Though I may not see eye to eye with your approach to learning, you have the potential to create a stylish dual-pane effect using CSS. Just keep in mind that without JavaScript knowledge, you won't be able to trigger any click events - so it might be worth expanding your skillset in that area. Give it a try!
HTML:
<div class="container">
<div class="col left"></div>
<div class="col right"></div>
</div>
CSS:
html,body{
margin:0;
height:100%;
overflow:hidden;
}
.container{
height:100%;
width:100%;
background:#F8F8F8;
position:relative;
}
.col{
height:100%;
width:60%;
min-width:40px;
position:absolute;
top:0;
transition: 1s ease;
}
.left{
background:#888;
left:-50%;
}
.right{
background:#222;
right:-50%;
}
.right:hover{
right:0;
}
.left:hover{
left:0;
}
Example: CodePen
As an aspiring web designer, I took a template from CodePen and crafted a testimonial slider for my website. To seamlessly merge it with the background, I've been trying to shift the entire testimonial to the left. Despite attempting the float-left p ...
I have created a basic form using the following code: <div class="container"> <div class="jumbotron" style="width:100%"> <h1> ConfigTool Web Interface </h1> <p> Edit the con ...
<form method="get" formenctype="text/plain" action="https://app.cryptolens.io/api/key/Activate" > <input type="text" maxlength="23" size="80" name="Key" placeholder="XXXXX-XXXXX-XXXXX-XXXXX" /> <input type="hidden" name="toke ...
When you visit this website and resize the browser window to reveal the toggle buttons, clicking on either one will only expand the dropdowns to a small portion of the screen width. I would like both dropdowns to stretch out and fill 100% of the available ...
I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation. Below is my utility navigation... <div class="horizontalnavlinks"> <ul> ...
Here is the code I used for my swiper element: new Swiper("#swiper-pricing", { slidesPerView: 1.3, spaceBetween: 30, centeredSlides: true, loop: true, keyboard: { enabled: true, }, autoplay: { delay: 50 ...
Looking to dynamically adjust the width of an input field and ensure that the suffix "meters (m)" sticks close to the entered number. Additionally, I want to pass a specific value to the input using `value="something"`, which then should expand the input w ...
I noticed that my navbar changes from transparent to opaque when scrolling. I am trying to achieve a similar effect like the one in this example: Initially, my navbar looks like this: As you can see, it has a light border and the font is not white. Howev ...
For my code, I need to implement a single checkbox. In my doc.ejs file: <tr ng-repeat="folder_l in folderlist | orderBy:created_date" > <td> <div class="permit"> <input class="chkbtn move_check" type="checkbox" id=" ...
<span name = "menu"> <!-- javascript here --> <!-- content loaded via ajax --> </span> <span name = "content"> <!-- content loaded via ajax --> <!-- updated by buttons from the menu--> </span> Seeking a ...
Is there a way in CSS to ensure that these input boxes are always aligned below each other, regardless of font family, size, or window movement by the user? https://i.stack.imgur.com/Zbadh.png Currently, I am using the following approach: tab1 { paddi ...
I have been learning from the AngularJS Tutorial on Code School, but I'm experiencing an issue where my JavaScript code is not rendering properly in the HTML. Below is the snippet of HTML code: <html ng-controller="StoreController as store"> & ...
Is there a way to retrieve a dynamically generated value from the view to the controller in AngularJS? <ng-option ng-repeat="w in details track by $index"> <div class="program-grid-row table-row" > <div> <a class= ...
(I don't believe the previous link addresses this question; please refer to the comment below) I am currently utilizing a CMS platform that utilizes a database instead of the usual file-directory structure for managing webpages. Due to the absence of ...
I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...
I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...
As a beginner in javascript and CSS, I am experimenting with creating a simple animation that adjusts the transparency of an image when triggered by an event. However, I am facing an issue where the animation only works every other time the function is cal ...
Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...
I stumbled upon an element (div1) and now I am looking for a link within that element (link) so that I can navigate to it. <div class="div1"> <p> <a href="link">Link</a> </p> </div> ...
As a seasoned front-end developer, I recently encountered an issue that has stumped me. My main navigation bar has extensive right padding to ensure the hover dropdowns have ample space. The problem seems to be in this piece of code: HTML: <div id="h ...