Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Need help ASAP! Thank you JavaJam Coffee House Case Study In this chapter\'s cas

ID: 3852825 • Letter: N

Question

Need help ASAP!

Thank you

JavaJam Coffee House Case Study In this chapter's case study you will use the JavaJam Coffee House existing website (Ch er's case study you ill ise the Javalam Coffee House existing website Your new page will be similar to have three tasks in this case study: apter 8) as a starting point and modify the Menu page to display information in a table. Figure 9.16 when you have completed this case study. You 1. Create a new folder for this JavaJam case study. 2. Modify the style sheet (javajam.css) to configure style rules for the new table. 3. Modify the Menu page to use a table to display information as shown in Figure 9.16. Review and Apply 303

Explanation / Answer

This is an CSS file which I had made for the menu for one of my projects as you haven't given the HTML file so I have provided you my website's menu code for the reference by looking at it you can edit your code easily. This code is of side-bar menu.Here it goes:

menu.css

/* ==========================================================================
07. Menu
========================================================================== */
.menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgba(17,21,31,.79);
   z-index: 6;
   opacity: 0;
   visibility: hidden;
   transition: .5s;
}
.menu-overlay.open {
   opacity: 1;
   visibility: visible;
}
.menu-open {
   display: block;
   width: 30px;
   height: 22px;
   position: absolute;
   top: 30px;
   left: 30px;
   z-index: 6;
   overflow: hidden;
   background: rgba(0,0,0,0);
}
.menu-open:hover {
   opacity: 1;
}
.menu-open.close {
   opacity: 0;
}
.menu-open .line {
   display: block;
   width: 30px;
   height: 2px;
   background: #fff;
   transition: .25s;
   position: absolute;
   left: 0;
}
.menu-open .top-line {
   top: 0;
   transition-delay: .2s;
}
.menu-open .middle-line {
   top: 10px;
   transition-delay: .1s;
}
.menu-open .bottom-line {
   bottom: 0;
   width: 15px;
}
.menu-open .top-line.left {
   -webkit-transform: translateX(-60px);
   transform: translateX(-60px);
}
.menu-open:hover .top-line {
   -webkit-transform: translateX(60px);
   transform: translateX(60px);
}
.menu-open:hover .top-line.left {
   -webkit-transform: translateX(0);
   transform: translateX(0);
}
.menu-open .middle-line.left {
   -webkit-transform: translateX(-60px);
   transform: translateX(-60px);
}
.menu-open:hover .middle-line {
   -webkit-transform: translateX(60px);
   transform: translateX(60px);
}
.menu-open:hover .middle-line.left {
   -webkit-transform: translateX(0);
   transform: translateX(0);
}
.menu-open .bottom-line.left {
   -webkit-transform: translateX(-45px);
   transform: translateX(-45px);
}
.menu-open:hover .bottom-line {
   -webkit-transform: translateX(45px);
   transform: translateX(45px);
}
.menu-open:hover .bottom-line.left {
   -webkit-transform: translateX(0);
   transform: translateX(0);
}
.menu {
   width: 320px;
   background: #10141e;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   z-index: 8;
   -webkit-transition: .25s;
   transition: .25s;
   -webkit-transition-delay: .6s;
   transition-delay: .6s;
   -webkit-transform: translateX(-320px);
   transform: translateX(-320px);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   overflow-y: auto;
}
.menu.open {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   transition-delay: 0s;
}
.menu>.content {
   padding: 30px;
   background: rgba(17,21,31,.9);
   min-height: 100%;
}
.menu-header {
   position: relative;
   text-align: center;
}
.menu-header h3 {
   -webkit-transform: translateY(-96px);
   transform: translateY(-96px);
   transition: .25s;
   transition-delay: .1s;
   opacity: 0;
   font-weight: 400;
}
.menu.open .menu-header h3 {
   -webkit-transform: translateY(0);
   transform: translateY(0);
   opacity: 1;
}
.menu-header h3 small {
   padding-left: 2px;
}
.menu-close {
   font-size: 50px;
   line-height: 50px;
   color: #fff;
   position: relative;
   transition: .25s;
   transition-delay: .2s;
   opacity: 0;
   width: 20px;
   height: 20px;
   overflow: hidden;
   display: inline-block;
   margin-top: 36px;
}
.menu-close span {
   display: block;
   width: 24px;
   height: 2px;
   background: #fff;
   position: absolute;
   top: 50%;
   margin-top: -1px;
   left: 50%;
   margin-left: -12px;
   transition: .25s;
}
.menu-close span:nth-child(1) {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}
.menu-close span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   transition-delay: .25s;
}
.menu-close span:nth-child(3) {
   -webkit-transform: rotate(45deg) translateX(-72px);
   transform: rotate(45deg) translateX(-72px);
}
.menu-close span:nth-child(4) {
   -webkit-transform: rotate(-45deg) translateX(072px);
   transform: rotate(-45deg) translateX(072px);
   transition-delay: .25s;
}
.menu-close:hover span:nth-child(1) {
   -webkit-transform: rotate(45deg) translateX(72px);
   transform: rotate(45deg) translateX(72px);
}
.menu-close:hover span:nth-child(2){
   -webkit-transform: rotate(-45deg) translateX(-72px);
   transform: rotate(-45deg) translateX(-72px);
}
.menu-close:hover span:nth-child(3) {
   -webkit-transform: rotate(45deg) translateX(0px);
   transform: rotate(45deg) translateX(0px);
}
.menu-close:hover span:nth-child(4) {
   -webkit-transform: rotate(-45deg) translateX(0px);
   transform: rotate(-45deg) translateX(0px);
}
.menu.open .menu-close {
   bottom: 0;
   opacity: 1;
}
.menu-close:hover {
   color: #fff;
}
.main-nav {
   font-size: 16px;
   text-align: center;
   line-height: 16px;
   text-transform: uppercase;
   letter-spacing: 1.6px;
   margin-top: 28px;
}
.main-nav li {
   margin-bottom: 28px;
   -webkit-transform: translateX(-100%) translateY(24px);
   transform: translateX(-100%) translateY(24px);
   transition: .5s;
   opacity: 0;
   display: block;
   width: 100%;
}
.menu.open .main-nav li {
   -webkit-transform: translateX(0%) translateY(0);
   transform: translateX(0%) translateY(0);
   opacity: 1;
}
.main-nav li a {
   color: #949fab;
   display: block;
   position: relative;
}
.main-nav li a:hover {
   color: #ff4c14;
   opacity: 1;
}
.main-nav li.active a {
   color: #ff4c14;
}
.main-nav li a span {
   display: inline-block;
   position: relative;
}
.main-nav li a span:before {
   content: '';
   display: block;
   height: 1px;
   background: #ff4c14;
   position: absolute;
   top: 8px;
   left: -8px;
   right: -8px;
   -webkit-transform: translateX(-48px);
   transform: translateX(-48px);
   opacity: 0;
   transition: .25s;
}
.main-nav li a:hover span:before {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}
.main-nav li ul {
   padding: 0;
   margin-top: 12px;
   display: none;
}
.main-nav li ul li a {
   font-size: 12px;
   color: #949fab;
}
.main-nav li ul li a:hover {
   color: #ff4c14;
}
.main-nav li ul li {
   margin-bottom: 0;
   padding-bottom: 6px;
}
.main-nav li.active ul li a {
   color: #949fab;
}
.main-nav li.active ul li a:hover {
   color: #ff4c14;
}
.submenu {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 320px;
   z-index: 7;
   visibility: hidden;
}
.submenu.open {
   visibility: visible;
}
.submenu .item {
   display: block;
   transition: .25s;
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   opacity: 0;
   position: relative;
   transition-timing-function: ease-in-out;
}
.submenu.open .item {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}
.submenu img {
   height: 100%;
}
.submenu a:hover {
   opacity: 1;
}
.submenu a:hover img {
   opacity: 1;
}
.submenu .item .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
   color: #fff;
   background: rgba(17,21,31,.9);
   text-transform: uppercase;
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   transition: .25s;
   opacity: 0;
   transition-timing-function: ease-in-out;
}
.submenu .item:hover .overlay {
   -webkit-transform: translateX(0);
   transform: translateX(0);
   opacity: 1;
}
.submenu .item .overlay span {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   display: block;
}
.submenu .item .play {
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 50px;
   letter-spacing: 0;
   color: #11151f;
   background: transparent;
   display: block;
   border-radius: 50%;
   width: 80px;
   height: 80px;
   line-height: 50px;
   padding-top: 15px;
   padding-left: 7px;
   margin-left: -40px;
   margin-top: -40px;
   text-align: center;
   transition: .25s;
}
.submenu .item:hover .play {
   background: transparent;
}
.submenu-close {
   font-size: 50px;
   line-height: 50px;
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 10;
   transition: .25s;
   width: 20px;
   height: 20px;
   overflow: hidden;
   display: none;
   -webkit-transform: translateX(-52px);
   transform: translateX(-52px);
}
.submenu.open .submenu-close {
   -webkit-transform: translateX(0);
   transform: translateX(0);
}
.submenu-close span {
   display: block;
   width: 24px;
   height: 2px;
   background: #fff;
   position: absolute;
   top: 50%;
   margin-top: -1px;
   left: 50%;
   margin-left: -12px;
   transition: .25s;
}
.submenu-close span:nth-child(1) {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
}
.submenu-close span:nth-child(2) {
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   transition-delay: .25s;
}
.submenu-close span:nth-child(3) {
   -webkit-transform: rotate(45deg) translateX(-72px);
   transform: rotate(45deg) translateX(-72px);
}
.submenu-close span:nth-child(4) {
   -webkit-transform: rotate(-45deg) translateX(072px);
   transform: rotate(-45deg) translateX(072px);
   transition-delay: .25s;
}
.submenu-close:hover span:nth-child(1) {
   -webkit-transform: rotate(45deg) translateX(72px);
   transform: rotate(45deg) translateX(72px);
}
.submenu-close:hover span:nth-child(2){
   -webkit-transform: rotate(-45deg) translateX(-72px);
   transform: rotate(-45deg) translateX(-72px);
}
.submenu-close:hover span:nth-child(3) {
   -webkit-transform: rotate(45deg) translateX(0px);
   transform: rotate(45deg) translateX(0px);
}
.submenu-close:hover span:nth-child(4) {
   -webkit-transform: rotate(-45deg) translateX(0px);
   transform: rotate(-45deg) translateX(0px);
}
@media all and (max-width: 1200px) {
   .menu {
       width: 100%;
       -webkit-transform: translateX(-100%);
       transform: translateX(-100%);
       transition-delay: 0s !important;
   }
   .submenu {
       left: 0;
       z-index: 9;
       width: 100%;
       height: 100%;
       overflow-y: auto;
   }
   .submenu .item .overlay {
       -webkit-transform: translateX(0);
       transform: translateX(0);
       opacity: 1;
       background: rgba(17,21,31,.7)
   }
   .submenu-close {
       display: inline-block;
   }
   .submenu img {
       height: auto;
       width: 100%;
   }
   .menu-header h3 {
       transition: 0s;
   }
   .menu-close {
       transition: 0s;
   }
   .main-nav li {
       transition: 0s;
       opacity: 1;
       transition-delay: 0s !important;
   }
   .submenu .item {
       transition-delay: 0s !important;
       opacity: 1;
   }
   .main-nav li ul {
       display: block;
   }
}
@media all and (max-height: 740px) and (min-width: 1200px) {
   .main-nav {
       font-size: 14px;
       line-height: 16px;
       margin-top: 14px;
   }
   .main-nav li {
       margin-bottom: 14px;
   }
}

Please rate the answer if it helped.....Thankyou

Hope it helps......

Related Questions

Need correct answer! . Need clear and detailed answer please. I am STILL confuse
Question #1330573
Need correct answers please. Answer ONLY 4 of the following 5 multiple choice qu
Question #2087103
Need correct answers to questions with red x beside them A company has three emp
Question #2435386
Need coupling constant (J value, to one decimal place, in Hz) for all mulitplets
Question #889759
Need desperate help with this will rate your answer livesaver Pine trees are rel
Question #3451
Need detail solution!!!!!!!! Problem 3: A graduating MIE student goes to a caree
Question #3023853
Need detailed answer please! so we did our lab on AC fields and in the lab we ad
Question #1402378
Need detailed assistance with Q1, On January 1, 2015, warren Corporation had 1,0
Question #2474796
Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote

Navigate

Previous
Need help ASAP! Computer Science C++ code. The program below counts vowels and c
Next
Need help ASAP. C++ Language Please update the test case code below with the fol

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.