Drop Down Menu

HTML & CSS
1

Hello. I hope you don’t mind me asking another question but I am stuck again.

I am a relative beginner to web development and am currently redesigning my DJ website.

http://www.jameswinfield.co.uk/v2.html

Within the top-left menu, I want to have a div that drops down upon clicking the Events tab (to show the next event I am DJing at).

I have tried various ideas but none are working.

Please can you help.

Thanks James

2

Here is a nudge in the right direction.

3

Thanks however I still don’t understand! I have read it twice and tried a couple of things on input[type=checkbox]:checked ~ div but nothing changes

4

Maybe you need to clarify (explain) what you have tried and how it doesn’t work. I copied the code directly from the demo into a new page and it works like a champ. IE. the background changes color when the input is toggled.

Can you get that much to work?

5

I have included in the CSS:

input[type=checkbox]:checked ~ div {
background: red;
}

The background doesn’t change.

6

Are you doing it right?
http://codepen.io/ryanreese09/pen/zGYzWa
We need your code example that isn’t working please.

7

This is the CSS - it is only the last bit I have put in for this:

@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(font-awesome.css);

/* This is for the top-left main menu */

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html,
body {
  height: 100%;
}

body {
  background-image: url(../../bg.jpg);
    width: 100%;
}

.menu {
  position: fixed;
  z-index: 9999;
  margin-top: 0px;
}

.menu nav {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  -ms-opacity: 0;
  -o-opacity: 0;
  opacity: 0;
}

.menu input#slide:checked ~ nav {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
}

.menu label {
  position: fixed;
  font-size: 50px;
  cursor: pointer;
  z-index: 9999;
}

.menu input#slide {
  display: none;
}

.menu input#slide:checked ~ label.open i {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.menu label i,
.menu nav,
.menu nav ul li a span {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu label,
.menu nav ul li a i,
.menu nav ul li a span {
  line-height: 120px;
  text-align: center;
  width: 120px;
  height: 120px;
}

.menu nav ul {
  list-style: none;
  overflow: hidden;
}

.menu nav ul li a i {
  font-size: 30px;
}

.menu nav ul li a span {
  font-family: 'Lato', tahoma, sans-serif;
  font-size: 17.14285714px;
  text-transform: uppercase;
  width: 0;
}

.menu nav ul li a:hover span {
  width: 100px;
  padding: 0 10px;
}

.menu nav ul li.active a span {
  width: 100px;
  padding: 0 10px;
}

.menu.top {
  top: 0px;
}

.menu.bottom {
  bottom: 0px;
}

.menu.left,
.menu.left label {
  left: 0;
}

.menu.right,
.menu.right label {
  right: 0;
}

.menu.horizontal nav ul li,
.menu.horizontal nav ul li a span {
  float: left;
}

.menu.left.horizontal nav {
  margin-left: -50px;
}

.menu.left.horizontal input#slide:checked ~ nav {
  margin-left: 120px;
}

.menu.right.horizontal nav {
  margin-right: -60px;
}

.menu.right.horizontal input#slide:checked ~ nav {
  margin-right: 60px;
}


.menu.blue label,
.menu.blue nav ul li a ul li i {
  color: #F82D27;


}

.menu.blue nav ul li a span {
  color: #F235E9;


}

.test {
    width: 400px;
    height: 400px;
    background-color: #fff;
    opacity: 0.5;
    text-decoration: none;
}

.test
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

input[type=checkbox]:checked ~ div {
   background: red;
}
8

What div(s), and where, is not turning red for you?
I’m on here - http://www.jameswinfield.co.uk/v2.html

9

What I need to do is figure out how to drop a div from clicking the events tab.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.