CSS Navigation Menu

Pure CSS and HTML navigation menu example

---

• ⬆️ Top of Document

• 🏗️ Requirements

• ⚡ Quick Start

• 🧰 Usage

• 🗒 Notes

  • index.html
  • assets/css/style.css

• 📈 Contributing

  • 🔱 Forking
  • 💱 Sponsor

• 📇 Attribution

• ⚖️ Licensing

---

Requirements

A web-browser is required to interact with rendered index.html file. For local testing some form of web-server may be necessary, eg...

cd ~/git/hub/web-dev-examples/css-navigation-menu

python3 -m http.server --bind 127.0.0.1 8080

... Alternatively this repository may be deployed and served via GitHub Pages.

---

Quick Start

Clone this project...

Linux/MacOS

mkdir -vp ~/git/hub/web-dev-examples

cd ~/git/hub/web-dev-examples

git clone [email protected]:web-dev-examples/css-navigation-menu.git

Windows

set _organization_directory="%HOMEDRIVE%%HOMEPATH%\git\hub\web-dev-examples"

if not exists %_organization_directory (
  md %_organization_directory
)

CD /D %_organization_directory

git clone git@github.com:web-dev-examples/css-navigation-menu.git

---

Usage

Use a mouse or Tab key to focus the Menu label and either click, or use Enter or Space keys, to open the menu.

Once open use the mouse, or Tab key, to select a link to navigate to.

Clicking out of the menu bounds will automatically close the menu.

Prefix the URL with view-source: to explore the served source code, eg...

view-source:https://web-dev-examples.github.io/css-navigation-menu/index.html

---

Notes

Information about source code

Current limitations of using only HTML and CSS;

• the Esc key without JavaScript will not close opened menu(s)

• the Tab key may focus elements other than those listed within top-most menu

• the menu width, and label, adjusts to widths of inner content

---

index.html

index.html contains HTML5 elements that define page structure, and inline CSS3 is leveraged to provide core menu functionality.

The lebel and input checkbox elements are tied to one-another via id and for attributes, eg...

<input id="session_state" type="checkbox">

<label for="session_state">Click It!</label>

... the "session_state" value allows clicking on the label element to toggle input state of the checkbox. When combined with CSS :checked pseudo class this allows for powerful manipulation of page layout and styling!

Few things to keep in mind:

• an id attribute should be unique for a page, if two or more elements have the same id value then the first defined within the HTML markup will be targeted, and all others will be ignored

• multiple label, or other elements, may have the same for target but this functionality is not utilized as often

• because the id and for elements may be in any order, any depth, this may be leveraged to allow CSS to operate beyond the normal Cascade

In fact any element other than :root and body are able to be modified via a strategically placed input element. However, beware such hacks may cause markup to become unmaintainable in the future!

---

assets/css/style.css

assets/css/style.css Provides additional styling and further enhances menu presentation.

Much of the styling within this file is for visual presentation, and it is recommend to open a web-browser console to toggle various settings.

---

Contributing

Options for contributing to css-navigation-menu and web-dev-examples

---

Forking

Start making a Fork of this repository to an account that you have write permissions for.

• Add remote for fork URL. The URL syntax is [email protected]:<NAME>/<REPO>.git...

cd ~/git/hub/web-dev-examples/css-navigation-menu

git remote add fork [email protected]:<NAME>/css-navigation-menu.git

• Commit your changes and push to your fork, eg. to fix an issue...

cd ~/git/hub/web-dev-examples/css-navigation-menu


git commit -F- <<'EOF'
:bug: Fixes #42 Issue


**Edits**


- `<SCRIPT-NAME>` script, fixes some bug reported in issue
EOF


git push fork gh-pages

Note, the -u option may be used to set fork as the default remote, eg. git push -u fork gh-pages however, this will also default the fork remote for pulling from too! Meaning that pulling updates from origin must be done explicitly, eg. git pull origin gh-pages

• Then on GitHub submit a Pull Request through the Web-UI, the URL syntax is https://github.com/<NAME>/<REPO>/pull/new/<BRANCH>

Warning the source code and styling for index.html file are intentionally minimal! In other words; enhancement related Pull Requests should generally focus on assets/css/style.css, and bug related Pull Requests should target index.html file.

To decrease the chances of documentation related Pull Request needing modifications before being accepted, please check the dot-github repository for detailed contributing guidelines.

---

Sponsor

Thanks for even considering it!

Via Liberapay you may on a repeating basis.

Regardless of if you're able to financially support projects that Web-Dev Examples maintains, please consider sharing projects that are useful with others, because one of the goals of maintaining Open Source repositories is to provide value to the community.

---

Attribution

• GitHub -- github-utilities/make-readme

---

License

Pure CSS and HTML navigation menu example
Copyright (C) 2021 S0AndS0

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, version 3 of the License.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

For further details review full length version of AGPL-3.0 License.