Top nav menu test

Developer
Boaz
Size
5,620 Kb
Views
8,096
  1. Top nav menu test Previews
  2. Top nav menu test HTML Codes
  3. Top nav menu test CSS Codes
  4. Top nav menu test JS Codes

How do I make an top nav menu test?

What is a top nav menu test? How do you make a top nav menu test? This script and codes were developed by Boaz on 16 December 2022, Friday.

Top nav menu test Previews
IQ Test

Top nav menu test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Top nav menu test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<header class="header"> <!-- MOBILEmenu--------------> <div class="mobile-nav"><a class="fa-bars current" href="javascript:void(0)" title="Menu"><span>Menu</span></a> <a class="fa-phone" href="tel:0546-464178" title="Phone me"><span>Phone me</span></a> <a class="fa-envelope" href="mailto:[email protected]" title="E-mail me"><span>Email me</span></a> </div> <!-- --> <div class="rmm" id="mobile-menu"> <ul> <li><a href="#">Portfolio</a> </li> </ul> <ul> <li class="current"><a href="#">About</a> </li> </ul> <ul> <li><a href="Services.html">Services </a> </li> </ul> <ul> <li><a href="Blog/">Blog</a> </li> </ul> <ul> <li><a href="Contact.html">Contact</a> </li> </ul> </div> <!--rmm --> <!--scrollmenu class="rmm"--> <div class="rmm" id="scrollmenu"> <a class="fa-chevron-up" href="#top"><span>back</span></a> <!-- class="top-left"--> <ul> <li><a href="Gallery.html">Portfolio</a> </li> <li class="current"><a href="index.html">About</a> </li> <li><a href="Services.html">Services </a> </li> <li><a href="Blog/">Blog</a> </li> <li><a href="Contact.html">Contact</a> </li> </ul> <a class="fa-envelope" href="mailto:[email protected]"><span>[email protected]</span></a> </div> <!--rmm --> <div class="header">	<div id="hi"> </div> <div class="navtabs" id="hi"> <ul><li><a href="#">Portfolio</a></li>	<li class="current"><a href="index.html" >About</a></li>	<li><a href="Services.html " >Services </a></li>	<li><a href="Blog/" >Blog</a></li>	<li><a href="Contact.html">Contact</a></li> </ul> </div><!--rmm --> <a class="fa-envelope-o" href="mailto:[email protected]"> [email protected]</a> </div> </header>
<body>	<section class=""><h1>what can I do?</h1><div id="w"> <div id="content"> <div id="blog" class="feedcontainer"></div> </div></div </section><h1>2 <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr><br>3<br>1<br>4<hr><br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr><br>3<br>1<br>4<hr><br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr> <br>3<br>1<br>4<hr><br>3<br>1<br>4<hr> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Top nav menu test - Script Codes CSS Codes

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/*slops*/
/*orange red :#FF8800 #f1c40f*/
.navtabs a:before{content:'';display:block;height:-17px;position:relative;top:50px;right:250px; background-color:Gold;margin:-20px;padding:20px;z-index: 98;width:120%; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;
}
.header .navtabs a:hover{background:none;color:white;z-index: 100;}
.navtabs a:hover:before, .navtabs .current a:before{background-color:white;right:0px;}
.navtabs .current a{font-weight:800;color:#FF8800;margin-bottom:22px;padding-top:0px;}
#scrollmenu{display:block;width:100%;height:60px;;position:absolute;top:0;background-color:rgba(255, 255, 255, .93);margin:-20px;padding:20px;
z-index:-1;}
body {background-color:white; margin:0px;	overflow-x: hidden; /*!important*/ width:100%; height:auto; font-family:'Open Sans Hebrew', serif; }
/*email me*/ .fa-envelope-o { background-color:white; line-height: 1.4; text-align: center; font-size: 1em; font-weight: 200; text-decoration:underline; margin:1%; padding: 5px 10px; border-radius: 2px; display: inline-block; color: Black; text-shadow:none; -webkit-font-smoothing: antialiased; Float:right; /*!important*/
}
.tagline { position:absolute; top:50px; left:0px; margin: 0 0 0 1em;
}
#hi .fa-envelope-o { margin:0 auto;
}
.header { height:80px; Background-color:#f1c40f; width:100%; left: -2PX; z-index: 200; margin: 0 auto; padding: 0; -webkit-backface-visibility: hidden;
}
.header #hi { display:inline-block; vertical-align:middle;
}
/*-scrolling menu-*/ .mobile-nav, #scrollmenu { display: inline-block; margin: 0 auto; padding: 0; list-style: none; width: 100%;top:0px;
}
.header .rmm, .mobile-nav .rmm{ display: inline-block; margin-bottom: 5px; text-align: center; text-decoration: none;
}
#mobile-menu, #scrollmenu { z-index:100; display:none;
}/* Top Navigation Style */
.top{position:fixed; width: 100%;z-index:100;}
#scrollmenu { /*background-color: rgba(255, 255, 255, .93);border-bottom: 1px solid black;*/ position:fixed; top:0px; padding-left: 5px; padding-bottom: 5px; margin: 0; width: 100%;	}
.rmm ul { display: inline-block; margin:0; padding:0; border-bottom:1px solid #fffff;
}
.mobile-nav a, #scrollmenu a, #mobile-menu a { color:#34495E; text-decoration: none; padding:5px; letter-spacing: 0.1em; display: inline-block; z-index:105;
} #scrollmenu a:hover{ color: #FFF;background-color:orange;} #mobile-menu a:hover, .header a:hover{	display:block; color: #FFF; background-color: goldenrod;	top:0px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
.header .rmm a { position:relative; font-size:1em; text-decoration: none; letter-spacing: 0.1em; z-index:2;
}
.header li { position:relative; padding-left:0; padding-right:0; display:inline;
}
#scrollmenu li a, #mobile-menu li a { overflow:hidden; position: relative; max-height: 80px; display:inline-table; margin: 0px auto 0px auto; padding: 2px 10px 4px 10px;
}
.header li a { z-index:100;
}
/*bg bank
#a6d2a1;#FF4B4E;#cab7e5;;#837883;#76808a#2e3e5e;*/ .fa-bars:before, .fa-phone:before, .fa-envelope:before, .fa-envelope-o:before, .fa-chevron-up:before { font-family:'Fontawesome';
}
/*------------- MOBILE ONLY mENU ---------------*/
.mobile-nav {	background-color: rgba(255,179,0, .93);	overflow:hidden;
position:fixed; top:0px; visiblity:hidden; display:none; height:50px;	z-index:100;
}
#mobile-menu{
position: fixed;
width: 100%;
}
#mobile-menu li a {width: 100%;} .fa-bars, .mobile-nav .fa-phone, .mobile-nav .fa-envelope, .mobile-nav fa-chevron-up { display:inline-block; overflow:hidden; border-left: 0px solid black; line-height: 1em; font-size:20px; font-weight:400; padding:10px 5px 10px 5px; min-width:38px; width:27%; margin-left:3px; -webkit-font-smoothing: antialiased;
}
.fa-bars { font-size:25px;
}
.mobile-nav span { display:inline-block; MARGIN: 0 5px; line-height: 1.2em; font-size:13px; min-width:10px; width:20px; vertical-align:-15px; position:relative; Left:-2px; top:-12px
}
/*nav-"tabs"*/ .navtabs { position: absolute; top:0; width:80%; margin:0 auto; z-index:5; padding:0; text-align:justify;
}
.navtabs li {	top:100%; width:16%; overflow: hidden; position: relative;	font-size: 20px;	transform:skewX(12deg); display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
white-space: nowrap;
padding: 10px 8px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navtabs a {	transform:skewX(-12deg); text-align:center; border-bottom: 4px white; color: Black; font-weight: 700; display: block; letter-spacing: 0; outline: none; padding: 0 auto; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.navtabs a:hover{background-color:grey;}
.fa-bars.current { border-bottom: solid 4px #F39C12; color:white;
} @media only screen and (max-width : 846px) { #hi h1, #hi .tagline { display:none; } .navtabs { width:100%; left :2px; }
}
@media only screen and (min-width : 1224px) { #mobile-menu { display:none; }
}
@media only screen and (max-width: 72.875em) { #mobile-menu { display:none; top:40px; } .top { z-index:99; } .rmm li { width:90%; } .rmm li a { letter-spacing:0; }
}
@media only screen and (max-width: 46em) { .tabs li { width:50%; } h1 { background-size: 120px auto; } .mobile-nav { visibility:visible; display:inline-block; } #scrollmenu, #hi, .fa-envelope-o { visibility:hidden; } #hi h1 { display:block; visibility: visible;	margin-top:50px; padding:12px 2px 12px 2px; right:0px; }	.header{height:inherit;}
#scrollmenu, .mobile-nav { font-weight:400; } /*RMMopenclose*/ #mobile-menu { display:block; left:-3px; background-color:Gold; border:1px solid orange; } .rmm ul { margin:0px; padding: 0px; width: 100%; max-height:41px; height:41px; } .rmm li a { display:list-item; max-height:40px; top:0px; list-style: none; z-index:999; margin:0px; line-height:2; padding-top: 0px; } .rmm li a:hover { border:0px; background-color:transparent; top:0px; padding-top: 0px; } /*end menushit*/ .mobile-nav, #scrollmenu { height:40px; width:100%; line-height: 30px; }
}
::-moz-selection {color: white;background: orange;} ::selection {color: white;background: orange;}

Top nav menu test - Script Codes JS Codes

//show\hide-menu
$(document).ready(function () { $("#mobile-menu").hide();	$(".fa-bars").removeClass('current'); $(".fa-bars").click(function () { $("#mobile-menu").slideToggle(200); $(".fa-bars").toggleClass('current'); }); $("#mobile-menu li a").click(function () { $("#mobile-menu").slideToggle(200); $(".fa-bars").toggleClass('current'); });
});
//show\hide scroll
$('h1').scroll(function () { var x = $(this).scrollTop(); $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});
//nicescrolle--
$(function () { $('a[href*=#]:not([href=#])').click(function () { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } });
});
//Scrollmenu--
(function ($) { $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 250) { $('#scrollmenu').slideDown(120); } else { $('#scrollmenu').slideUp(250); } }); });
})(jQuery);
//Filtersbottomonscroll--
$(window).scroll(function () { var scroll = $(window).scrollTop(); if (scroll >= 250) { $("#filters").addClass("btm"); $("#sorts").addClass("btm"); } else { $("#filters").removeClass("btm");	$("#sorts").removeClass("btm"); }
});
//show\hide-menu kindfilter.toggle();
$(document).ready(function () { var catfilter = $('#filters #catfilter .fa.fa-sort'); var catbuttons = $('#catfilter .js-radio-button-group'); var kindfilter = $('#kindfilter .fa.fa-sort'); var sortfilter = $('#sorts .fa.fa-sort'); if (catfilter.css("display") == "inline-block") { catbuttons.hide(); } catfilter.click(function () { catbuttons.slideToggle(200); catfilter.toggleClass('current'); }); if (kindfilter.css("display") == "inline-block") { kindbuttons.hide(); } kindfilter.click(function () { kindbuttons.slideToggle(200); kindfilter.toggleClass('current'); catfilter.toggle(); });
});
/** * parses any RSS/XML feed through Google and returns JSON data * source: http://stackoverflow.com/a/6271906/477958 */$(function(){ // running custom RSS functions parseRSS('https://www.aniboaz.co.il/Blog/feed/', '#blog');
});
function parseRSS(url, container) { $.ajax({ url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), dataType: 'json', success: function(data) { //console.log(data.responseData.feed); $(container).html('<h2>'+capitaliseFirstLetter(data.responseData.feed.title)+'</h2>'); $.each(data.responseData.feed.entries, function(key, value){ var thehtml = '<h3><a href="'+value.link+'" target="_blank">'+value.title+'</a></h3>'; $(container).append(thehtml); }); } });
}
/** * Capitalizes the first letter of any string variable * source: http://stackoverflow.com/a/1026087/477958 */
function capitaliseFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1);
}
Top nav menu test - Script Codes
Top nav menu test - Script Codes
Home Page Home
Developer Boaz
Username Aniboaz
Uploaded December 16, 2022
Rating 3
Size 5,620 Kb
Views 8,096
Do you need developer help for Top nav menu test?

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!

Boaz (Aniboaz) Script Codes
Name
Online Tools
New website header
Online Tools 2.0
SVG animations for portfolio
Digital assets
Gofen
Online Tools 3.0
New navbar
Kanban Board
A Pen by Boaz
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!