From 8d5082a649b58cab9f9f0253ef33f74990e72849 Mon Sep 17 00:00:00 2001 From: Akanksha Date: Fri, 29 Dec 2023 22:44:03 +0530 Subject: [PATCH] responsive navbar --- index.html | 227 ++++++++++++++++++++++++++++++----------------------- script.js | 77 ++++++++++++++++++ styles.css | 201 ++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 386 insertions(+), 119 deletions(-) diff --git a/index.html b/index.html index 3ed46e6..ef28506 100644 --- a/index.html +++ b/index.html @@ -1,110 +1,141 @@ - - - - - - - Your Name - Portfolio - - - - -
-
-

Hey theređź‘‹ !

-

I am <Your Name>

+
+

Project 2

+

Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and + integrated third-party APIs for enhanced functionality.

+

Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB

+ +
-
- -
-
-

About Me

-

A passionate web developer currently in my second year at IGDTUW. My journey in the world of technology began with a deep curiosity for how things work on the web. - In my courses at IGDTUW, I've gained a solid foundation in programming languages like HTML, CSS, and JavaScript. I'm enthusiastic about creating responsive and visually appealing websites that not only meet functional requirements but also deliver a delightful user experience. - My interest in web development extends beyond the classroom. I actively participate in coding competitions, hackathons, and collaborative projects, continuously enhancing my skills and staying abreast of the latest industry trends.

- As a second-year student, I look forward to further expanding my knowledge, tackling challenging projects, and contributing to the dynamic field of web development. Let's connect and explore the possibilities together!

+ +
+

Project 3

+

Built a mobile-responsive website using React.js. Integrated state management for a seamless user + interface and employed RESTful API communication.

+

Skills and Tools: HTML, CSS, JavaScript, React.js

+ +
-
- -
-
-

Projects

- -
-

Project 1

-

A dynamic web application showcasing my skills in HTML, CSS, and JavaScript. Implemented responsive design for optimal user experience.

-

Skills and Tools: HTML, CSS, JavaScript

- - + +
+
+ + +
+
+

Contact Me

+ +
+
+ Email Icon +

Email: your.email@example.com

-
-

Project 2

-

Developed a full-stack web application using Node.js and MongoDB. Implemented user authentication and integrated third-party APIs for enhanced functionality.

-

Skills and Tools: HTML, CSS, JavaScript, Node.js, MongoDB

- - +
+ Phone Icon +

Phone: +123 456 789

-
-

Project 3

-

Built a mobile-responsive website using React.js. Integrated state management for a seamless user interface and employed RESTful API communication.

-

Skills and Tools: HTML, CSS, JavaScript, React.js

- - +
+ Address Icon +

Address: 123 Main St, Cityville, Country

-
-
- - -
-
-

Contact Me

- -
-
- Email Icon -

Email: your.email@example.com

-
- -
- Phone Icon -

Phone: +123 456 789

-
- -
- Address Icon -

Address: 123 Main St, Cityville, Country

-
- -
- LinkedIn Icon -

LinkedIn: Your LinkedIn

-
- -
- Twitter Icon -

Twitter: Your Twitter

-
+
+ LinkedIn Icon +

LinkedIn: Your LinkedIn +

-
-
- - - - +
+ Twitter Icon +

Twitter: Your Twitter

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js index 8b13789..a0c286a 100644 --- a/script.js +++ b/script.js @@ -1 +1,78 @@ +// ---------Responsive-navbar-active-animation----------- +function test(){ + var tabsNewAnim = $('#navbarSupportedContent'); + var selectorNewAnim = $('#navbarSupportedContent').find('li').length; + var activeItemNewAnim = tabsNewAnim.find('.active'); + var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight(); + var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth(); + var itemPosNewAnimTop = activeItemNewAnim.position(); + var itemPosNewAnimLeft = activeItemNewAnim.position(); + $(".hori-selector").css({ + "top":itemPosNewAnimTop.top + "px", + "left":itemPosNewAnimLeft.left + "px", + "height": activeWidthNewAnimHeight + "px", + "width": activeWidthNewAnimWidth + "px" + }); + $("#navbarSupportedContent").on("click","li",function(e){ + $('#navbarSupportedContent ul li').removeClass("active"); + $(this).addClass('active'); + var activeWidthNewAnimHeight = $(this).innerHeight(); + var activeWidthNewAnimWidth = $(this).innerWidth(); + var itemPosNewAnimTop = $(this).position(); + var itemPosNewAnimLeft = $(this).position(); + $(".hori-selector").css({ + "top":itemPosNewAnimTop.top + "px", + "left":itemPosNewAnimLeft.left + "px", + "height": activeWidthNewAnimHeight + "px", + "width": activeWidthNewAnimWidth + "px" + }); + }); +} +$(document).ready(function(){ + setTimeout(function(){ test(); }); +}); +$(window).on('resize', function(){ + setTimeout(function(){ test(); }, 500); +}); +$(".navbar-toggler").click(function(){ + $(".navbar-collapse").slideToggle(300); + setTimeout(function(){ test(); }); +}); + + +// --------------add active class-on another-page move---------- +jQuery(document).ready(function($){ + // Get current path and find target link + var path = window.location.pathname.split("/").pop(); + + // Account for home page with empty path + if ( path == '' ) { + path = 'index.html'; + } + + var target = $('#navbarSupportedContent ul li a[href="'+path+'"]'); + // Add active class to target link + target.parent().addClass('active'); +}); + + + + +// Add active class on another page linked +// ========================================== +// $(window).on('load',function () { +// var current = location.pathname; +// console.log(current); +// $('#navbarSupportedContent ul li a').each(function(){ +// var $this = $(this); +// // if the current path is like this link, make it active +// if($this.attr('href').indexOf(current) !== -1){ +// $this.parent().addClass('active'); +// $this.parents('.menu-submenu').addClass('show-dropdown'); +// $this.parents('.menu-submenu').parent().addClass('active'); +// }else{ +// $this.parent().removeClass('active'); +// } +// }) +// }); diff --git a/styles.css b/styles.css index 68b3dc8..0f267f1 100644 --- a/styles.css +++ b/styles.css @@ -6,33 +6,192 @@ body { } -nav { - background-color: #3498db; - color: #fff; - padding: 10px 0; -} + /* nav { + background-color: #3498db; + color: #fff; + padding: 10px 0; + } -nav ul { - list-style: none; - margin: 0; - padding: 0; - display: flex; -} + nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + } -nav li { - margin-right: 20px; -} + nav li { + margin-right: 20px; + } + + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + font-size: 16px; + transition: color 0.3s ease; + } -nav a { + nav a:hover { + color: #2980b9; + } */ + + + +/*----------bootstrap-navbar-css------------*/ + +.navbar-logo{ + padding: 15px; + color: #fff; +} +.navbar-mainbg{ + background-color: #5161ce; + padding: 0px; +} +#navbarSupportedContent{ + overflow: hidden; + position: relative; +} +#navbarSupportedContent ul{ + padding: 0px; + margin: 0px; +} +#navbarSupportedContent ul li a i{ + margin-right: 10px; +} +#navbarSupportedContent li { + list-style-type: none; + float: left; +} +#navbarSupportedContent ul li a{ + color: rgba(255,255,255,0.5); text-decoration: none; - color: #fff; - font-weight: bold; - font-size: 16px; - transition: color 0.3s ease; + font-size: 15px; + display: block; + padding: 20px 20px; + transition-duration:0.6s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + position: relative; +} +#navbarSupportedContent>ul>li.active>a{ + color: #5161ce; + background-color: transparent; + transition: all 0.7s; +} +#navbarSupportedContent a:not(:only-child):after { + content: "\f105"; + position: absolute; + right: 20px; + top: 10px; + font-size: 14px; + font-family: "Font Awesome 5 Free"; + display: inline-block; + padding-right: 3px; + vertical-align: middle; + font-weight: 900; + transition: 0.5s; +} +#navbarSupportedContent .active>a:not(:only-child):after { + transform: rotate(90deg); +} +.hori-selector{ + display:inline-block; + position:absolute; + height: 90%; + top: 0px; + left: 0px; + transition-duration:0.6s; + transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); + background-color: #fff; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + margin-top: 10px; +} +.hori-selector .right, +.hori-selector .left{ + position: absolute; + width: 25px; + height: 25px; + background-color: #fff; + bottom: 10px; +} +.hori-selector .right{ + right: -25px; } +.hori-selector .left{ + left: -25px; +} +.hori-selector .right:before, +.hori-selector .left:before{ + content: ''; + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #5161ce; +} +.hori-selector .right:before{ + bottom: 0; + right: -25px; +} +.hori-selector .left:before{ + bottom: 0; + left: -25px; +} + + +@media(min-width: 992px){ + .navbar-expand-custom { + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -ms-flex-pack: start; + justify-content: flex-start; + } + .navbar-expand-custom .navbar-nav { + -ms-flex-direction: row; + flex-direction: row; + } + .navbar-expand-custom .navbar-toggler { + display: none; + } + .navbar-expand-custom .navbar-collapse { + display: -ms-flexbox!important; + display: flex!important; + -ms-flex-preferred-size: auto; + flex-basis: auto; + } +} + -nav a:hover { - color: #2980b9; +@media (max-width: 991px){ + #navbarSupportedContent ul li a{ + padding: 12px 30px; + } + .hori-selector{ + margin-top: 0px; + margin-left: 10px; + border-radius: 0; + border-top-left-radius: 25px; + border-bottom-left-radius: 25px; + } + .hori-selector .left, + .hori-selector .right{ + right: 10px; + } + .hori-selector .left{ + top: -25px; + left: auto; + } + .hori-selector .right{ + bottom: -25px; + } + .hori-selector .left:before{ + left: -25px; + top: -25px; + } + .hori-selector .right:before{ + bottom: -25px; + left: -25px; + } }