- Let S Add A Horizontal Menu To The Top Of Our Page Modifying The Provided Files Create A Vue Js Data Property Called 1 (39.81 KiB) Viewed 31 times
* {
box-sizing: border-box;
}
body, #app {
color: #333533;
background-color: #FFFFFF;
padding: 0;
margin: 0;
}
nav .pure-menu-link {
color: #CFDBD5;
font-weight: bold;
}
aside {
border-left: 1px solid #111111;
}
header, footer {
padding: 1em;
background-color: #F5CB5C;
color: #333533;
}
header {
margin-bottom: 1em;
border-bottom: 1px solid #333533;
}
footer {
margin-top: 1em;
border-top: 1px solid #333533;
text-align: center;
}
h1, h2, h3, h4, h5 {
font-family: 'Playfair Display', serif;
font-weight: 500;
}
.pure-button-active {
font-weight: bold;
}
.pad {
padding: 1em;
}
.item {
clear: left;
padding: 0.5em 0;
}
#ad img {
max-width: 24em;
max-height: 24em;
}
#ad h2 {
text-align: center;
}
#stores img {
width: 6em;
float: right;
margin-left: 1em;
}
#items img {
width: 12em;
float: left;
margin-right: 1em;
}
Here is JS document
/*
Top menu (task 1.5):
{ title:'Home', url:'/' }
{ title:'About', url:'/about' }
{ title:'Contact Us', url:'/contact' }
Top menu 2 (task 1.7):
{ title:'Home', url:'/', submenus: [] }
{ title:'About', url:'/about',
submenus: [
{ title:'Who we are', url:'/about#us' },
{ title:'What we do', url:'/about#store' },
{ title:'Our range', url:'/about#range' }
]
}
{ title:'Contact Us', url:'/contact',
submenus: [
{ title:'Information', url:'/contact#info' },
{ title:'Returns', url:'/contact#return' },
{ title:'Locate Us', url:'/contact#locate' }
]
}
Stores (task 1.8):
{ name:'Adelaide City', address:'45 Florabunda Lane, Adelaide,
5000', counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... _front.jpg'
},
{ name:'Steelton South', address:'77 Weigall Avenue, Steelton,
5413', counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... -front.jpg'
},
{ name:'Milton', address:'33 McGregor Street, Milton, 5880',
counter: 0,
img:'https://upload.wikimedia.org/wikipedia/ ... _front.JPG'
}
*/
const SPECIALS = [
{ name:'Salt', price:'$0.99',
url:'https://live.staticflickr.com/22/274761 ... f0f5_b.jpg'
},
{ name:'Pepper', price:'$2.49',
url:'https://live.staticflickr.com/191/44954 ... adeb_b.jpg'
},
{ name:'Tomato Sauce', price:'$3.50',
url:'https://upload.wikimedia.org/wikipedia/ ... ash%29.jpg'
},
{ name:'Worchestershire Sauce', price:'$4.20',
url:'https://upload.wikimedia.org/wikipedia/ ... ce_001.jpg'
}
];
var vueinst = new Vue({
el: '#app',
data:{
choose: 'Choose ...'
}
});
Here is HTML document.
Practical Excercise 6
Wendy's Delicious Condiments (and Fruit)
close
Some Name
$Some.Price
Search
CommentsAdd comment
Salt or Pepper?
Salt
Pepper
Dark Mode:
OFF
ON
© 2021 WDC
Hi I just want to follow the instruction(on the Image) and
add some codes to these three documents.
Let's add a horizontal menu to the top of our page. Modifying the provided files: • Create a Vue.js data property called top_menu • Set its initial value to an array containing the provided menu item objects; you'll find these in the commented section of the JavaScript file. • Use list rendering to create menu items in the <ul> with id topmenu. • A menu item looks like <li class="pure-menu-item"><a href="ITEM_URL" class="pure-menu-link">ITEM_TITLE</a></li> • If you've done this correctly, the menu in the header should display all items. wchuy's Delicious Conume Home