sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

correct hover behavior

Browse Source
This commit is contained in:
Sander Roosendaal
2018-09-21 21:43:31 +02:00
parent b5d62d78c9
commit 6a29211f9e
4 changed files with 117 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rowers/templates/redesign.html
View File

@@ -12,6 +12,7 @@
{% block sidebar %}
<ul class="cd-accordion-menu animated">
<li><a href="#0">Link</a></li>
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
<label for="group-1">Group 1</label>
@@ -24,7 +25,6 @@
<ul>
<li><a href="#0">Link</a></li>
<li><a href="#0">Link</a></li>
<li><a href="#0">Link</a></li>
</ul>
</li>
<li class="has-children">

117
static/css/styles2.css
View File

@@ -8,8 +8,9 @@
.wrapper > * {
/* border: 2px solid #f08c00; */
padding: 5px;
/* border: 2px solid #f08c00; */
border 0;
padding: 5px;
}
a {
@@ -20,8 +21,8 @@
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
padding: 0.2em 0.2em 0.2em 0.2em;
}
@@ -32,31 +33,69 @@
}
aside ul {
margin-bottom: 0;
left: 15px;
}
aside ul label,
aside ul a {
padding-left: 15px;
}
aside ul ul label,
aside ul ul a {
padding-left: 30px;
}
aside ul ul ul label,
aside ul ul ul a {
padding-left: 45px;
}
aside ul ul ul ul label,
aside ul ul ul ul a {
padding-left: 60px;
}
aside li,
aside a,
aside ul label,
aside ul li,
aside ul a,
aside ul ul label,
aside ul ul li,
aside ul ul a,
aside ul ul ul label,
aside ul ul ul li,
aside ul ul ul a {
list-style: none;
margin: 5px;
padding: 0;
margin: 0;
background: #35383d;
}
aside li {
margin-left: 0;
aside ul label:hover,
aside ul a:hover,
aside ul ul label:hover,
aside ul ul a:hover,
aside ul ul ul label:hover,
aside ul ul ul a:hover {
background: #4d5158;
}
aside li li {
margin-left: 30px;
}
aside a {
color: #a0f6aa;
text-decoration: none;
}
aside .cd-accordion-menu {
width: 100%;
max-width: 600px;
background: #4d5158;
/* margin: 4em auto; */
/* box-shadow: 0 4px 40px #70ac76; */
max-width: 600px;
background: #35383d;
}
aside .cd-accordion-menu ul {
@@ -81,38 +120,42 @@
aside .cd-accordion-menu a {
position: relative;
display: block;
background: #4d5158;
color: #ffffff;
/* font-size: 1.6rem; */
font-size: 1.2em;
}
aside .cd-accordion-menu label::before
{
/* icons */
content: 'V';
font: normal normal normal 1.2em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: '\f0da';
display: inline-block;
width: 16px;
height: 16px;
-webkit-transform: translateY(-50%) rotate(-90deg);
-moz-transform: translateY(-50%) rotate(-90deg);
-ms-transform: translateY(-50%) rotate(-90deg);
-o-transform: translateY(-50%) rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
aside .cd-accordion-menu label {
cursor: pointer;
background: #35383d;
}
aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
/* rotate arrow */
-webkit-transform: translateY(0%) ;
-moz-transform: translateY(0%) ;
-ms-transform: translateY(0%) ;
-o-transform: translateY(0%) ;
transform: translateY(0%) ;
-webkit-transform: translateY(20%) rotate(90deg);
-moz-transform: translateY(20%) rotate(90deg);
-ms-transform: translateY(20%) rotate(90deg);
-o-transform: translateY(20%) rotate(90deg);
transform: translateY(20%) rotate(90deg);
}
@@ -123,12 +166,8 @@
display: block;
}
aside .cd-accordion-menu ul label,
aside .cd-accordion-menu ul a {
background: #35383d;
padding-left: 30px;
}
user ul {
list-style: none;
margin: 0;
@@ -170,10 +209,8 @@
}
.side {
grid-area: sidebar;
background: #4d5158;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;/* background: #4d5158; */
background: #35383d;
padding: 0;
}
.ad {

16
static/js/menu.js Normal file
View File

@@ -0,0 +1,16 @@
$(document).ready(function(){
var accordionsMenu = $('.cd-accordion-menu');
if( accordionsMenu.length > 0 ) {
accordionsMenu.each(function(){
var accordion = $(this);
//detect change in the input[type="checkbox"] value
accordion.on('change', 'input[type="checkbox"]', function(){
var checkbox = $(this);
console.log(checkbox.prop('checked'));
( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
});
});
}
});

23
templates/newbase.html
View File

@@ -91,6 +91,29 @@
return t;
}(document, "script", "twitter-wjs"));</script>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
$(document).ready(function(){
var accordionsMenu = $('.cd-accordion-menu');
if( accordionsMenu.length > 0 ) {
accordionsMenu.each(function(){
var accordion = $(this);
//detect change in the input[type="checkbox"] value
accordion.on('change', 'input[type="checkbox"]', function(){
var checkbox = $(this);
console.log(checkbox.prop('checked'));
( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
});
});
}
});
</script> <!-- Resource jQuery -->
{% analytical_head_bottom %}
</head>