Navigation One: This design is a very simple navigation bar with a horizontal layout. It can be modified to allow a drop-down menu to be added. It uses a hover effect to underline the text to give the user feedback on an action. It is easily adapted through the code.
See the Pen nav-bar by George Houghton (@TheM3xican) on CodePen.
Navigation Two: This is a drop-down menu that has been animated using a hover effect. As the user hovers over the button the text will change colour to indicate that the button is active and the drop-down will appear. This simple design can be adapted easily.
See the Pen dedMrP by George Houghton (@TheM3xican) on CodePen.
Navigation Three: This navigation bar is slightly different to the ones above. It is a vertical navigation bar that can be used at the edge of the page in order to take up less space. It uses a hover function and hides buttons that are not wished to be shown. It is simple to edit and to include in any website.
See the Pen virtical-navigation by George Houghton (@TheM3xican) on CodePen.