Menu Navigation Items

Developer
Paulo Sérgio
Size
5,500 Kb
Views
12,144
  1. Menu Navigation Items Previews
  2. Menu Navigation Items HTML Codes
  3. Menu Navigation Items CSS Codes
  4. Menu Navigation Items JS Codes

How do I make an menu navigation items?

What is a menu navigation items? How do you make a menu navigation items? This script and codes were developed by Paulo Sérgio on 19 November 2022, Saturday.

Menu Navigation Items Previews
IQ Test

Menu Navigation Items - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Navigation Items</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" ng-app="myApp"> <div class="menu-container" ng-controller="myController"> <div class="menu-side"> <button class="btn btn-primary btn-block navbutton-up"> <i class="fa fa-chevron-up"></i> <div class="arrow"></div> </button> <button class="btn btn-default btn-block ellip current"> </button> <div class="menu-side-buttons"> <button id='btn{{$index}}' ng-repeat="text in textArray" class="btn btn-default btn-block ellip"> {{text}} </button> </div> <button class="btn btn-primary btn-block navbutton-down"> <i class="fa fa-chevron-down"></i> </button> </div> <div class="post-message">Posts</div> <div class="menu-content"> <div class="item" id='item{{$index}}' ng-repeat="item in textArray"> <h1>{{item}}</h1> <p>{{item}} {{item}} {{item}} {{item}}</p> </div> </div> <div class="menu-content-below"></div> <div class="star"> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-o" aria-hidden="true"></i> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.js'></script> <script src="js/index.js"></script>
</body>
</html>

Menu Navigation Items - Script Codes CSS Codes

@font-face { font-family: 'museo_sans_cond'; src: url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.eot");
}
@font-face { font-family: 'museo_sans_cond'; src: url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.eot"); src: url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.eot?#iefix") format("embedded-opentype"), url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.woff2") format("woff2"), url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.woff") format("woff"), url("http://cdn.softpedia.com/_fonts/museosanscnd-500-webfont.ttf") format("truetype");
}
@font-face { font-family: 'museo_slab'; src: url("http://cdn.softpedia.com/_fonts/museo_slab_300-webfont.eot"); src: url("http://cdn.softpedia.com/_fonts/museo_slab_300-webfont.eot?#iefix") format("embedded-opentype"), url("http://cdn.softpedia.com/_fonts/museo_slab_300-webfont.woff2") format("woff2"), url("http://cdn.softpedia.com/_fonts/museo_slab_300-webfont.woff") format("woff"), url("http://cdn.softpedia.com/_fonts/museo_slab_300-webfont.ttf") format("truetype");
}
html, body, input, select, textarea, option, button, li { font-family: 'museo_sans_cond'; font-weight: 500; letter-spacing: 0.1px; -webkit-font-smoothing: antialiased !important; text-rendering: optimizeLegibility !important;
}
button:focus { outline: 0;
}
.star { position: absolute; height: 100%; color: #fdc24d !important; opacity: 1.72; left: 400px; z-index: 40; top: 254px; font-size: 24px;
}
.menu-container { position: relative; width: 100%; height: 50vh; background-color: transparent;
}
.menu-content { color: white; overflow: hidden; padding-top: 40px; padding-bottom: 40px; /*padding-top: 80px;*/
}
.menu-content h1 { font-family: 'museo_slab'; /* margin-top: 80px; */ padding-top: 40px; margin-left: 400px;
}
.menu-content p { margin-top: 50px; font-family: 'museo_sans_cond'; margin-left: 400px; font-size: 17px; line-height: 19px; height: 38px; width: 280px; z-index: 11; opacity: 0.75;
}
.menu-content .item { position: relative; height: 282px; top: -40px;
}
.ellip { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.btn { border-radius: 0px; font-family: 'museo_sans_cond'; color: #4c689c; font-size: 16px; cursor: pointer; padding-left: 20px; padding-right: 10px; border-bottom: 1px solid #b2bed5; font-weight: 500; letter-spacing: 0.1px; background-color: #E5E9F0;
}
.btn-block + .btn-block { margin-top: 0;
}
.btn.btn-primary { background-color: #55558D; font-size: 24px; color: white;
}
.btn,
.btn:active,
.btn:focus { outline: none;
}
.btn.btn-default { text-align: left;
}
.menu-side { position: relative; margin-left: 30px; width: 250px; height: 100%; background-color: white; z-index: 20;
}
.menu-side-buttons { height: 229px; overflow-y: hidden; transition: 1s;
}
.menu-content { position: absolute; width: 100%; height: 282px; background-color: blue; top: 19px; z-index: 10; background: linear-gradient(141deg, #555566 0%, #555599 51%, #5555DD 75%);
}
.post-message { position: absolute; top: 0px; text-transform: uppercase; padding: 0 40px 0 40px; color: white; font-size: 14px; font-weight: 700; height: 40px; line-height: 40px; background-color: #c33; left: 400px; z-index: 12;
}
.menu-content-below { background-color: #002772; opacity: 0.25; height: 60px; width: 100%; position: absolute; top: 241px; left: 0; z-index: 10;
}
button.current { line-height: 18px; font-size: 16px; color: #fff; font-family: 'museo_sans_cond'; font-weight: 700; background-color: #264887; border-bottom: none !important; width: 250px; height: 39px; position: relative; top: -1px; z-index: 22; opacity: 0.8; position: absolute; top: 47px;
}
.arrow { top: 0; content: ""; display: block; position: absolute; top: 47px; right: -20px; border-bottom: 19px solid transparent; border-left: 20px solid #264887; border-top: 20px solid transparent; opacity: 0.75;
}

Menu Navigation Items - Script Codes JS Codes

var app = angular.module('myApp' , []);
var current = "";
var previus = "";
var velocity = 300;
function getRandomColor() { var letters = '0123456789ABCDEF'.split(''); var color = ''; for (var i = 0; i < 2; i++){ color += letters[Math.floor(Math.random() * 10 + 6)]; } color= "#5555" + color; return color; }
app.controller('myController' , ['$scope' , function($scope){ var textArray = []; $scope.textArray = []; for(var i = 0; i < 10; i++){ textArray.push("Blablabla..." + i); } $scope.textArray = textArray;
}])
function changeItemBackground(selector){ var item = $(selector); item.css('background' , 'linear-gradient(141deg, ' + getRandomColor() + ' 0%, ' + getRandomColor() + ' 51%, ' + getRandomColor() + ' 75%)')
}
$(document).ready(function(){ var lastbutton = $('.menu-side-buttons').find("button:last-child").clone(); var firstbutton = $('.menu-side-buttons').find("button:first-child").clone(); $(".menu-side-buttons").scroll(function(){ //console.log(this) clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { // do something console.log("Haven't scrolled in 250ms!"); }, 250)); }); /*$('.menu-side-buttons').infinitescroll({ navSelector : ".menu-side-buttons", // selector for the paged navigation (it will be hidden) nextSelector : ".menu-side-buttons:last-child", // selector for the NEXT link (to page 2) itemSelector : ".menu-side-buttons button" // selector for all items you'll retrieve });*/ $('button:not(.navbutton-up):not(.current):not(.navbutton-down)').click(function(event){ event.preventDefault(); var top = $(this).position().top - $('.menu-side-buttons').position().top; $('.menu-side-buttons').scrollTo($(this) , velocity); var index = $(this).attr('id').split('btn')[1]; $('.menu-content').scrollTo($('#item' + index) , velocity); changeItemBackground('#item' + index) var index = $(this).index(); current = index; console.log('current' , current) console.log('previus' , previus) previus = index; }) $('button.navbutton-down').click(function(event){ event.preventDefault(); var length = $('button:not(.navbutton-up):not(.current):not(.navbutton-down)').length; if(current < length - 1){ if(current){ current++; } else { current = 0; current++; } } else { //current--; console.log('inside') return; } $('.menu-side-buttons').scrollTo($('#btn' + current) , velocity); $('.menu-content').scrollTo($('#item' + current) , velocity); changeItemBackground('#item' + current) }) $('button.navbutton-up').click(function(event){ event.preventDefault(); if(current > 0){ if(current){ current--; } else { current = 0; //current++; } } else { current = 0; return; } $('.menu-side-buttons').scrollTo($('#btn' + current) , velocity); $('.menu-content').scrollTo($('#item' + current) , velocity); changeItemBackground('#item' + current); })
})
Menu Navigation Items - Script Codes
Menu Navigation Items - Script Codes
Home Page Home
Developer Paulo Sérgio
Username paulo101977
Uploaded November 19, 2022
Rating 3
Size 5,500 Kb
Views 12,144
Do you need developer help for Menu Navigation Items?

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!

Paulo Sérgio (paulo101977) Script Codes
Name
Simon Game
Donut Singapoure Oi
Spinner Loader SVG Pure Css Radius Loader
Pomodoro Clock
Twitch.tv API Query
Project Singapoure
D3js SVG Clip Path
Game of Life
Bar Chart
SunRay Css
Create amazing web content 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!