Check out my code on JS Fiddle here: http://jsfiddle.net/kodi/d2s3uja0/1/
I'm having trouble getting my side menu bar fixed and the content to scroll. I want to display the menu vertically on the left just like this:
M
E
N
U
Any suggestions on how to achieve this using CSS? Also, I want jQuery toggle functionality after clicking the menu.
I'm aiming for a layout similar to this website: wholefoodsmarket
Use CSS transitions by placing the #menu outside of the view and simply toggle the class on click of #menu_btn.
HTML
<div id="header">
<div id="wrapper">
<div id="menu_btn" style="float:left;"><a href="#" style="color:#FFFFFF;">Menu</a></div>
<div id="whole">
<div id="wleft">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Yes Service</a>
<ul id="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Network</a></li>
</ul>
</li>
<li><a href="#">Boys Uniforms</a></li>
<li><a href="#">Girls Uniforms</a><ul id="submenu">
<li><a href="#">T-shirt</a></li>
</ul></li>
<li><a href="#">Thin client</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--endofwleft-->
</div><!--endofwhole-->
</div><!--endofmenu-->
</div><!--endofwrapper-->
</div><!--endofheader-->
CSS
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
}
#header{
width:100%;
height:60px;
background-color:#031f2d;
}
#wrapper
{
width:1300px;
height:auto;
margin:auto;
}
#whole
{
width:1300px;
height:1000px;
float:left;
}
#wleft ul
{
width:200px;
height:auto;
float:left;
position:fixed;
outline: 1px solid;
}
#wleft #menu li
{
width:200px;
height:30px;
float:left;
color:#FFFFFF;
background-color:#000000
}
#wleft #menu li a{
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
#menu li
{
position:relative;
}
#menu li #submenu
{
position:absolute;
}
#menu li #submenu
{
display:none;
}
#menu li:hover #submenu
{
display:block;
position:absolute;
margin-left:200px;
}
#menu li:hover #submenu li a
{
border:#CCCCCC 1px solid;
height:25px;
width:300px;
background-color:#031f2d;
color:#fff;
display:block;
padding-top:5px;
}
#menu li:hover #submenu li a
{
text-align:left;
text-decoration:none;
}
#submenu li:hover{
background-color:#333333;
}
#menu_btn {
transform: rotateZ(-90deg);
position: relative;
top: 22px;
left: -5px;
}
#menu {
position: absolute;
top: 50px;
left: -220px;
transition: left 0.5s ease-out;
}
#menu.shown {
left:0;
}
jQuery
$(document).ready(function(e) {
$('#menu_btn').click(function(e) {
$('#menu').toggleClass('shown');
});
});
Could someone please assist with highlighting the entire row of the parent for the drop down feature? In the given scenario, level1 and level23 should be highlighted like the child items are. The goal is to highlight the entire row with the entire width. ...
var sub_response_type = {"survey_question":["Test lable"],"responseTypeText":"Exit label","select_param_type":[">","<"],"questions_id":["7","8"],"select_param_value":["12","34"],"radio_type":["&&"]}; var order = ['questions_id' ...
I created a form that sends a POST request to a PHP file on the server. The request is processed successfully, but when I attempt to access the response data, it appears as null. Here is my PHP code snippet: <?php header('Access-Control-Allow-Orig ...
Below is the code snippet from my app.js file: var express = require("express"), mongo = require("mongodb"), db = require("monk")("localhost:27017/nodemails"), bodyParser = require("body-parser"), logger = require("morgan"), path = require("path"); var a ...
Hi there! I'm currently working on resizing an image using a CSS grid layout. Here's the CSS code I have so far: /* Reset */ * { padding: 0; margin: 0; } html { height: 100%; background-image: url("/assets/images/background.p ...
I've set up an input field with a ref="inputField" as shown below: <input ref="inputField"> <button @click="btn">Click</button> When the button is clicked, I want the input field to receive focus. Here& ...
Just getting started with Vue.JS and experimenting with creating two lists of books (read and unread) from a shared object in the global data state. This is my approach - working demo (works like a charm! However, I'm wondering if this is considered ...
I am a beginner with angularjs. I attempted to create 2 separate modules in a single js file and then manually bootstrap one of them to an element. This method was suggested in a stackoverflow post. However, it seems to not be working. Each of the modules ...
Consider the code snippet below. var exec = require('child_process').exec; var extraInfo = {'test':1,'passing':'test'}; runWithData(extraInfo); function runWithData(passedData) { exec('/Users/test/Deskto ...
Using codegen, I've created custom GraphQL hooks and types. query loadUsers($where: UserFilter) { users(where: $where) { nodes { id email firstName lastName phoneNumber } totalCount } } export functio ...
Is there a way to use RegEx to replace part of an HTML document without affecting the root element or other elements like event listeners? Consider this scenario: for (; document.body.innerHTML.indexOf(/ea/) != -1;) { document.body.innerHTML = docu ...
I am faced with a challenge of aligning a set of images on a webpage, each with varying heights, widths, and aspect ratios. My goal is to arrange them in a way that they fit seamlessly across the screen while ensuring their heights are uniform. Adjusting ...
I've been troubleshooting my code and I can't seem to figure out why the jquery.session.js file isn't working. Can someone help me find a solution? $.session.set('rmng_time', remaining_seconds); alert("j session "+$.sessi ...
Currently, if a user doesn't input a valid location in the API (e.g. a spelling mistake), the console displays an error. How can I make an alert appear on the screen to notify the user when this happens? const cityRef = document.querySelector(&ap ...
I have three unique images that I would like to animate in a fan-like manner consecutively. I prefer not to merge the images in Photoshop, as I want them to be displayed one after the other. Here is the code snippet (dummy images are used): .bannerimg ...
Currently, I am attempting to resolve a small issue in my code related to a tiny bug. In my React component, I have set an initial state as follows: const initialFormData = Object.freeze({ date: Moment(new Date()).format('YYYY-MM-DD'), pr ...
Hey there, I'm having some trouble with installing the Canvas package. I've tried Package Versions 6.1.13 and 6.1.3 Here are my system details: Ubuntu 18.04.5, Node 12.18.4 LTS, Python 2.7, g++ installed, pkg-config installed, libjpeg installed ...
I am curious to learn about the method Facebook uses to keep the chat bar at the bottom of the browser window even when we scroll through the page. ...
Apologies for my limited English proficiency. . I am trying to write code that will call myFunction() when the user clicks anywhere except on an element with the class .do-not-click-here. Here is the code I have written: document.addEventListener(' ...
My current issue involves the inability to set my background photo using a CSS file. I am utilizing NetBeans for this project. Inside a folder named css, there is a file called global.css which contains the following code: body{ background-image: url ...