Enjin Navigation Bar Creator

Developer
Collin Chappell
Size
6,599 Kb
Views
4,048
  1. Enjin Navigation Bar Creator Previews
  2. Enjin Navigation Bar Creator HTML Codes
  3. Enjin Navigation Bar Creator CSS Codes
  4. Enjin Navigation Bar Creator JS Codes

How do I make an enjin navigation bar creator?

You can create and edit an enjin navigation bar with this nifty tool. Now you no longer have to pay the developers just for a navigation bar!. What is a enjin navigation bar creator? How do you make a enjin navigation bar creator? This script and codes were developed by Collin Chappell on 01 February 2023, Wednesday.

Enjin Navigation Bar Creator Previews
IQ Test

Enjin Navigation Bar Creator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Enjin Navigation Bar Creator</title> <link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/DavidDurman/FlexiColorPicker/master/themes.css'>
<link rel='stylesheet prefetch' href='http://files.enjin.com/914727/farbtastic.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Blur https://i.imgur.com/Tzgtp3l.jpg -->
<link href='https://fonts.googleapis.com/css?family=Dosis:200,300,400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body>
<div class="navArea"> <div class="nav"> <ul> <li><a></a></li> </ul> </div>
</div>
<div class="popup"> <div class="pHead"> </div> <div class="pBody"> </div>
</div>
<div class="body">
</div>
<div class="create"> <div class="positioning"> <h3>Select the positioning</h3> <button type="button" class="fixed">Fixed At Top</button> <button type="button" class="scrolls">Scrolls With Page</button> <div class="nextP next"> <i class="fa fa-arrow-right"></i> </div> </div>
</div>
<div class="background"> <h3>Select the background color</h3> <div class="colorpicker"></div> <form><input type="text" class="bColor" value="#123456" /></form> <div class="nextB next"> <i class="fa fa-arrow-right"></i> </div> </div>
</div>
<div class="linkColor"> <h3>Select the text color</h3> <div id="colorpicker"></div> <form><input type="text" class="lColor" value="#123456" /></form> <div class="nextL next"> <i class="fa fa-arrow-right"></i> </div> </div>
</div>
<div class="borderColor"> <h3>Select the color of the bottom border</h3> <div id="colorpickerBC"></div> <form><input type="text" class="bcColor" value="#123456" /></form> <div class="nextBC next"> <i class="fa fa-arrow-right"></i> </div> </div>
</div>
<!-- PayPal -->
<div class="donate">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<!--
<div class="cp"> <div id="colorpicker"></div> <form><input type="text" id="color" value="#123456" /></form>
</div>
-->
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'></script>
<script src='http://files.enjin.com/914727/farbtastic.js'></script> <script src="js/index.js"></script>
</body>
</html>

Enjin Navigation Bar Creator - Script Codes CSS Codes

/* Setup */
body { overflow-x: hidden; overflow-y: scroll;
}
.donate { position: fixed; bottom: 20px; left: 8px;
}
input, textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 4px 4px; margin: 5px 1px 3px 0px; font-size: 20px; border: none !important;
}
input:focus, textarea:focus { box-shadow: 0 0 8px rgba(0, 0, 0, 0.8) !important;
}
*.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See https://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none;
}
.body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: linear-gradient(#59F7B0, #59DDF7); background-size: contain; background-repeat: no-repeat;
}
/* Stage One */
.create { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin-top: 3.5%;
}
.width { position: absolute; width: 60%; height: auto; padding: 12px 12px; right: 19.3%; text-align: center; font-family: "Dosis", sans-serif; font-size: 42px; font-weight: 400; color: #FFF; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 1px solid #fff; border-bottom: 2px solid #fff; transition: all 0.3s;
}
.width h3 { border-bottom: 1px dashed white; width: 70%; margin-left: auto; margin-right: auto; padding-bottom: 8px; margin-top: 0;
}
.next { display: none;
}
.next i { position: relative; font-size: 64px; margin-top: 8px; transition: opacity 0.2s, margin-right 0.4s cubic-bezier(0.24, 1.84, 0.3, 1.54), -webkit-transform 0.3s cubic-bezier(0.24, 1.84, 0.3, 1.54); cursor: pointer;
}
.next i:hover { margin-right: -8px;
}
.next i:active { margin-right: -16px; -webkit-transform: scale(0.85);
}
button { padding: 16px 16px; display: inline-block; background: none; border: 1px solid rgba(255, 255, 255, 0.8); border-bottom: 2px solid rgba(255, 255, 255, 0.8); border-radius: 5px; font-size: 32px; font-weight: 300; color: #fff; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); cursor: pointer; transition: all 0.2s cubic-bezier(0.24, 1.84, 0.3, 1.54);
}
button:hover { background: rgba(255, 255, 255, 0.4) !important;
}
button:active { -webkit-transform: scale(0.9); transform: scale(0.9); padding: 15px 15px;
}
.ciwc { display: none;
}
.ciw { width: 17.5%; padding: 4px 4px; font-size: 24px; background: rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0.8); border-bottom: 2px solid rgba(255, 255, 255, 0.8); border-radius: 5px;
}
/* Stage Two */
.positioning { position: absolute; width: 60%; height: auto; padding: 12px 12px; margin-top: 0; right: -100%; text-align: center; font-family: "Dosis", sans-serif; font-size: 42px; font-weight: 400; color: #FFF; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 1px solid #fff; border-bottom: 2px solid #fff; transition: all 0.3s;
}
.positioning h3 { border-bottom: 1px dashed white; width: 70%; margin-left: auto; margin-right: auto; padding-bottom: 8px; margin-top: 0;
}
.background { position: absolute; width: 60%; height: auto; padding: 12px 12px; margin-top: 0; right: -100%; text-align: center; font-family: "Dosis", sans-serif; font-size: 42px; font-weight: 400; color: #FFF; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 1px solid #fff; border-bottom: 2px solid #fff; transition: all 0.3s;
}
.background h3 { border-bottom: 1px dashed white; width: 70%; margin-left: auto; margin-right: auto; padding-bottom: 8px; margin-top: 0;
}
.colorpicker { margin-right: auto; margin-left: auto; width: 27%;
}
#colorpicker { margin-right: auto; margin-left: auto; width: 27%;
}
#colorpickerBC { margin-right: auto; margin-left: auto; width: 27%;
}
.linkColor { position: absolute; width: 60%; height: auto; padding: 12px 12px; margin-top: 0; right: -100%; text-align: center; font-family: "Dosis", sans-serif; font-size: 42px; font-weight: 400; color: #FFF; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 1px solid #fff; border-bottom: 2px solid #fff; transition: all 0.3s;
}
.linkColor h3 { border-bottom: 1px dashed white; width: 70%; margin-left: auto; margin-right: auto; padding-bottom: 8px; margin-top: 0;
}
.borderColor { position: absolute; width: 60%; height: auto; padding: 12px 12px; margin-top: 0; right: -100%; text-align: center; font-family: "Dosis", sans-serif; font-size: 42px; font-weight: 400; color: #FFF; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.3); border-radius: 10px; border: 1px solid #fff; border-bottom: 2px solid #fff; transition: all 0.3s;
}
.borderColor h3 { border-bottom: 1px dashed white; width: 70%; margin-left: auto; margin-right: auto; padding-bottom: 8px; margin-top: 0;
}

Enjin Navigation Bar Creator - Script Codes JS Codes

$(document).ready(function() {	$('.colorpicker').farbtastic('.bColor');	$('#colorpicker').farbtastic('.lColor'); $('#colorpickerBC').farbtastic('.bcColor');
});
// Stage One
$('.full').mousedown( function () { $('.width button').css('background', 'rgba(255,255,255,0)'), $(this).css('background', 'rgba(255,255,255,0.4)'), $('.nextW').slideDown('medium'); background = 0;
});
$('.content').mousedown( function () { $('.width button').css('background', 'rgba(255,255,255,0)'), $(this).css('background', 'rgba(255,255,255,0.4)'), $('.nextW').slideDown('medium'); background = 1
});
$('.nextW').click(function () { $('.width').css('right', '100%'), $('.positioning').css('right', '19.3%');
});
// Stage Two
$('.fixed').mousedown( function () { $('.positioning button').css('background', 'rgba(255,255,255,0)'), $(this).css('background', 'rgba(255,255,255,0.4)'), $('.nextP').slideDown('medium'); position = 0;
});
$('.scrolls').mousedown( function () { $('.positioning button').css('background', 'rgba(255,255,255,0)'), $(this).css('background', 'rgba(255,255,255,0.4)'), $('.nextP').slideDown('medium'); position = 1;
});
$('.nextP').click(function () { $('.positioning').css('right', '100%'), $('.background').css('right', '19.3%');
});
// Stage Three $('.nextB').slideDown('medium');
$('.nextB').click(function () { $('.background').css('right', '100%'), $('.linkColor').css('right', '19.3%'), background = $('.bColor').val();
});
// Stage Four $('.nextL').slideDown('medium');
$('.nextL').click(function () { $('.linkColor').css('right', '100%'), $('.borderColor').css('right', '19.3%'); color = $('.lColor').val();
});
//Stage Five $('.nextBC').slideDown('medium');
$('.nextBC').click(function () { $('.borderColor').css('right', '100%'), $('').css('right', '19.3%'); color = $('.lColor').val();
});
Enjin Navigation Bar Creator - Script Codes
Enjin Navigation Bar Creator - Script Codes
Home Page Home
Developer Collin Chappell
Username Keubix
Uploaded February 01, 2023
Rating 3
Size 6,599 Kb
Views 4,048
Do you need developer help for Enjin Navigation Bar Creator?

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!

Collin Chappell (Keubix) Script Codes
Name
Profile Page
Mac OS X Mockup
Funny Pet Facebook Concept
Info Revealing Hover Effects
Minedrix
Parallax navigation
DART Website Design
Frosted Glass Navigation Bar
A Pen by Collin Chappell
Flip Out Navigation Concept
Create amazing blog posts 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!