Menu_2

Developer
Angelina
Size
4,070 Kb
Views
12,144
  1. Menu_2 Previews
  2. Menu_2 HTML Codes
  3. Menu_2 CSS Codes
  4. Menu_2 JS Codes

How do I make an menu_2?

What is a menu_2? How do you make a menu_2? This script and codes were developed by Angelina on 24 November 2022, Thursday.

Menu_2 Previews
IQ Test

Menu_2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu_2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <head> <script src="https://cdn.firebase.com/js/client/2.2.0/firebase.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script> <title>Latest Activity</title> </head> <body> <div class="content"> <div class="status-bar"></div> <div class="tool-bar"> <div class="tools"> <ul> <li><i class="fa fa-search" id="search"></i></li> <li><i class="fa fa-ellipsis-v" id="settings"></i></li> </ul> </div><!--end of tools--> </div><!--end of tool-bar--> <div class="filters"> Filter Results: <ul> <li id="blog-filter">Blog</li> <li id="port-filter">Portfolio</li> </ul> </div><!--end of filters--> <div class="feed col-1-1"> <div class="feed-item filter blog"> <div class="icon-holder col-1-5"> <div class="icon"></div> </div> <div class="text-holder col-3-5"> <div class="feed-title">Some blog</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!</div> </div><!--end of text-holder--> <div class="col-1-5"></div> </div><!--end of feed item--> <div class="feed-item filter blog"> <div class="icon-holder col-1-5"> <div class="icon"></div> </div> <div class="text-holder col-3-5"> <div class="feed-title">Some Blog</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!</div> </div><!--end of text-holder--> <div class="col-1-5"></div> </div><!--end of feed item--> <div class="feed-item filter blog"> <div class="icon-holder col-1-5"> <div class="icon"></div> </div> <div class="text-holder col-3-5"> <div class="feed-title blog">Some Blog</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!</div> </div><!--end of text-holder--> <div class="col-1-5"></div> </div><!--end of feed item--> <div class="feed-item filter portfolio"> <div class="icon-holder col-1-5"> <div class="icon"></div> </div> <div class="text-holder col-3-5"> <div class="feed-title">Some Title</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!</div> </div><!--end of text-holder--> <div class="col-1-5"></div> </div><!--end of feed item--> <div class="feed-item filter"> <div class="icon-holder col-1-5"> <div class="icon"></div> </div> <div class="text-holder col-3-5"> <div class="feed-title filter">Some Title</div> <div class="feed-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia natus obcaecati consequuntur quis molestias! Minima impedit ad omnis. Libero quibusdam facere dignissimos ut mollitia unde sunt nobis quia, nam quasi!</div> </div><!--end of text-holder--> <div class="col-1-5"></div> </div><!--end of feed item--> </div><!--end of feed--> </div><!--end of content--> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu_2 - Script Codes CSS Codes

*{ margin:0; box-sizing: border-box;
}
/div { border: solid red 1px;
}
.status-bar { position:fixed; top:0px; z-index:50; width:100%; height:10px; background:pink;
}
.tool-bar { margin-top: 10px; position:fixed; width:100%; height:48px; padding-top: .2em; padding-left: .2em; background:black; color:white; font-size:1.7em; z-index:50;
}
.tool-bar .tools { padding-top:3px; position:fixed; right:20px;
}
.tool-bar .tools ul { list-style-type:none /* use it for listing out navigation and other amd take out dots in list*/
}
.tool-bar .tools ul li { display: inline; padding-left:.1em;
}
.filters { position:fixed; background: lightblue; width: 240px; height: 200px; z-index:60; top:58px; /* right:-100%; thats how we can hide thing and then make transition to get it visible */ right:0px; padding: 10px; transition: right .5s;
}
/*GRID STUFFS */
[class*='col-'] { /* float: --- rearange stuff and divs on the page */ float:left;
}
.col-1-1 { width:100%;
}
.col-1-5 { width:20%;
}
.col-3-5 { width:60%;
}
.feed{ margin-top: 54px;
}
.feed-item{ display: block; height: 100px;
}
.feed-item .icon-holder{ padding-top: 20px; height: 100%;
}
.feed-item .icon-holder .icon{ width: 50px; height: 50px; background-image: url('http://vignette4.wikia.nocookie.net/pikmin/images/9/9d/Regal_Diamond.png/revision/latest?cb=20130106203844'); background-position: center; background-size: contain; background-repeat: no-repeat; float: right; border-radius: 100%;
}
.feed-item .text-holder { height:100%; padding-left:1em; padding-top: .6em; border-bottom:1px solid grey;
}
.feed-item .text-holder .feed-title { height:1.2em; overflow: hidden; /* if content start to exceed then clip it*/
}
.feed-item .text-holder .feed-description { height:2.4em; overflow: hidden; /* if content start to exceed then clip it*/
} /* we use filter so we do not overwrite for every single feed item her property, just need to put name "filter" in th class name*/
.filter{ overflow: hidden; transition: height 0.2s;
}
.blog { color:red;
}
.portfolio { color:blue;
}
#blog-filter {color: red;}
#port-filter {color: blue;}

Menu_2 - Script Codes JS Codes

$(function (){ var filtersOpen=true; // var blogItemsOpen=true; var showBlog = true; var showPortfolio = true; var dummy={ "activities": [ { "title":"Some title is Good", "description":"some Kind of description is always good.", "type":"blog" }, { "title": "A second title is good", "description": "This is a second description.", "type":"blog" }, { "title": "A third description so gooooooooooooooooodddddd", "description": "Third description", "type":"portfolio" } ] } // make a template from HTML with variables in <% %> var compiled = _.template('<div class="feed-item <% if (obj.type) { %><%= type %><% } %> <% if (obj.firebase) { %>firebase<% } %>"><div class="icon-holder col-1-5"><div class="icon"></div></div><div class="text-holder col-3-5"><div class="feed-title"><%= title %></div><div class="feed-description"><%= description %></div> </div><div class="col-1-5"></div></div>'); // let's put our template on the page for(var i=0;i<dummy.activities.length;i++){ text = compiled(dummy.activities[i]); $('.feed').append(text); } // jist added our dynamic text thank to variable "text" //this stuff will hapen when page is ready // we can use css selector like get id from saying it # $('#settings').click(function(){ if (filtersOpen) { //close it //move it off the screen $('.filters').css('right', '-100%'); filtersOpen=false; } else { $('.filters').css('right', '0px'); filtersOpen=true; } }) $('#blog-filter').click(function(){ if(showBlog){ $('.blog').css('height', '0px');	$('#blog-filter').css('color', 'red'); showBlog = false; }else{ $('.blog').css('height', '100px');	$('#blog-filter').css('color', 'black'); showBlog = true; } }); //turn portfolio items off $('#port-filter').click(function(){ if(showPortfolio){ $('.portfolio').css('height', '0px'); $('#port-filter').css('color', 'blue'); showPortfolio = false; }else{ $('.portfolio').css('height', '100px'); $('#port-filter').css('color', 'black'); showPortfolio = true; } }); ////////////////// Firebase connection and cycle for it var ref = new Firebase ("https://seneca-activities.firebaseio.com/activities"); ref.on("value", function(snapshot){ console.log(snapshot.val()); var data = snapshot.val(); // .val - means we cam get all the information from it for (i=0; i<data.length; i++) { data[i].firebase = true; var text = compiled(data[i]); $('.feed').append(text); } })
})
Menu_2 - Script Codes
Menu_2 - Script Codes
Home Page Home
Developer Angelina
Username Angelina_Lapteva
Uploaded November 24, 2022
Rating 3
Size 4,070 Kb
Views 12,144
Do you need developer help for Menu_2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Angelina (Angelina_Lapteva) Script Codes
Name
Transition Menu and Video Background
Week_3_session
SVG Animation diagramm
Menu Transitions
A Pen by Angelina
Piechart
Wireframing
Tooltip
Scalable objects
Beautiful PersonaL Page
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!