updated menu configs and dark mode tweaks

This commit is contained in:
Jacob Haddon
2020-11-19 20:16:26 -05:00
parent 97cf9cb1a0
commit abc5cb369d
2 changed files with 65 additions and 36 deletions

View File

@ -36,16 +36,41 @@
<style>#panel {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
<style>
#panel {
/* padding: 50px; */
padding: 5px;
text-align: left;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
/* column-count: 4; */
padding: 20px;
display: none;
margin: 0 0 20px 0;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #777;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#flip {
margin: -40px 0 0 90%;
}
</style>
@ -80,6 +105,7 @@
jQuery(document).ready(function(){
jQuery("#flip").click(function(){
jQuery("#panel").slideToggle();
jQuery("#flip").toggleClass("change");
});
});
</script>
@ -88,7 +114,7 @@ jQuery(document).ready(function(){
<body <?php body_class(); ?>>
<div id="wrapper">
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?>
<div id="header">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
@ -97,24 +123,13 @@ jQuery(document).ready(function(){
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
</div><!--#header-->
<div id="flip">Click to slide down panel</div>
<div id="flip"> <div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div>
<div id="panel">
<?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?>
Hello world!Top References
<ul>
<li>HTML Reference</li>
<li>CSS Reference</li>
<li>JavaScript Reference</li>
<li>SQL Reference</li>
<li>Python Reference</li>
<li>W3.CSS Reference</li>
<li>Bootstrap Reference</li>
<li>PHP Reference</li>
<li>HTML Colors</li>
<li>Java Reference</li>
<li>Angular Reference</li>
<li>jQuery Reference</li>
</ul>
<div style="clear: both"></div>
</div>
<div id="content">