+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Showcase and Reviews (https://hackforums.net/forumdisplay.php?fid=172)
+---- Thread: HTML CSS and a bit of JQuery navigation [menu] (/showthread.php?tid=5373649)
HTML CSS and a bit of JQuery navigation [menu] - wanbetaaler - Aug 13, 2016
Hi there,
i coded a navigation which i want to generalize on future projects.
its like 90% finished just some touch ups and some effects and i am finished with it i still need a logo for login and a form for it and a search icon for the search bar and when clicked on the logo it will expand to whats there right now.
anyways here are some screenshots and a gif.
tips are great :)
full layout
Spoiler (Click to View)
![[Image: 39f18ddb5cb4faf5c8f45d4edd1b0928.png]](https://i.gyazo.com/39f18ddb5cb4faf5c8f45d4edd1b0928.png)
resized window
Spoiler (Click to View)
![[Image: a273fbbde266f371a6bb35c4c25b0bec.png]](https://i.gyazo.com/a273fbbde266f371a6bb35c4c25b0bec.png)
resized and open menu
Spoiler (Click to View)
![[Image: 667df1b6d6baf1c1adca02a84bd48cd7.png]](https://i.gyazo.com/667df1b6d6baf1c1adca02a84bd48cd7.png)
gif
Spoiler (Click to View)
![[Image: f278bf4436a4a8d195b0e3722487a014.gif]](https://i.gyazo.com/f278bf4436a4a8d195b0e3722487a014.gif)
UPDATE
i updated the font guys..
Spoiler (Click to View)
resized
Spoiler (Click to View)
i have updated the burger icon for the resized window
While closed
Spoiler (Click to View)
While open
Spoiler (Click to View)
gif so you can see the animation between the clicks
Spoiler (Click to View)
* UPDATE 2***
added forms and checkboxes and modals
current view
Spoiler (Click to View)
scrolled down view
Spoiler (Click to View)
modal with checkboxes animated gif
Spoiler (Click to View)
i updated the font guys..
Spoiler (Click to View)
![[Image: 38610a9f1ad4dc60dd4995eec5e9fac4.png]](https://i.gyazo.com/38610a9f1ad4dc60dd4995eec5e9fac4.png)
resized
Spoiler (Click to View)
i have updated the burger icon for the resized window
While closed
Spoiler (Click to View)
![[Image: 83970f9dda2c72b3532647e73378a651.png]](https://i.gyazo.com/83970f9dda2c72b3532647e73378a651.png)
While open
Spoiler (Click to View)
![[Image: 11d5a3ddcb8452372ddb5bc6d5abf765.png]](https://i.gyazo.com/11d5a3ddcb8452372ddb5bc6d5abf765.png)
gif so you can see the animation between the clicks
Spoiler (Click to View)
![[Image: 439f5660ff1503229a42a851994287c5.gif]](https://i.gyazo.com/439f5660ff1503229a42a851994287c5.gif)
* UPDATE 2***
added forms and checkboxes and modals
current view
Spoiler (Click to View)
![[Image: 940a4320a1b26ddf6573d1ae8c3b434a.png]](https://i.gyazo.com/940a4320a1b26ddf6573d1ae8c3b434a.png)
scrolled down view
Spoiler (Click to View)
![[Image: e4bdda4b6531a33a1e67b31dd27b4311.png]](https://i.gyazo.com/e4bdda4b6531a33a1e67b31dd27b4311.png)
modal with checkboxes animated gif
Spoiler (Click to View)
![[Image: f006cf1b6e9b8e8e068735fef8d5d303.gif]](https://i.gyazo.com/f006cf1b6e9b8e8e068735fef8d5d303.gif)
* - al5ina5 - Aug 13, 2016
Looks like it works well! I add some more detail to make it prettier.
Great job!
* - Tylers The Name - Aug 13, 2016
It's simple, sleek and most importantly it works. Mobile compatibility looks good to. Nice job! Maybe a different font for the nav-bar but I'm sure you've already thought of that.
* - RevenĪ±nt - Aug 13, 2016
I really like the clean and simple look it has. Good job, OP.
* - Picksley - Aug 15, 2016
This looks pretty tasty, I'm not fond on the font you used. Maybe something a bit more metro and sharp?
Other than that great work
* - wanbetaaler - Aug 15, 2016
(Aug 15, 2016 04:36 AM)Picksley Wrote: This looks pretty tasty, I'm not fond on the font you used. Maybe something a bit more metro and sharp?
Other than that great work
Yeh i need to refine it a bit more like font and some small aditional animations.
thanks for the tip, btw any font u can recommend
* - Narwals - Aug 17, 2016
(Aug 15, 2016 09:38 AM)wanbetaaler Wrote: Yeh i need to refine it a bit more like font and some small aditional animations.
thanks for the tip, btw any font u can recommend
Open Sans never failed anyone. Just take a look at the Google Fonts library. Packed with fonts like Roboto to make your site look clean.
* - wanbetaaler - Aug 17, 2016
Yes thanks look at the updated version my brother