Chrome Startup Page Style Navigation - jQuery Google Nav

Google Nav is a jQuery script to create Google Chrome Startup Page inspired website links (shortcuts) on the webpage. It uses HTML5 local storage to save the current site list on the client side. 

Click the 'Add Shortcuts' button to add your favorite websites to the site (navigation) list and the script will automatically generate a text-based site logo by extracting the first character of the URL.

To remove a site from the navigation list on mobile devices, tap and hold for at least 200ms and then tap the 'Remove' icon.

The script also provides a keyboard hotkey functionality for accessibility. For instance, pressing 'J' will open https://www.jqueryscript.net in a new tab.

How to use it:

1. Load the latest Font Awesome Iconic Font for the Add/Close icons. OPTIONAL.

<link rel="stylesheet" href="/path/to/cdn/fontawesome/all.css" />

2. Create the HTML for the site list.

<div class="label">
  <ul class="siteList">
    <li class="last">
      <div class="addButton">
        <div class="icon-wrapper">
          <i class="fas fa-plus-circle"></i>
        </div>
        <div class="text">
          Add Shortcut
        </div>
      </div>
    </li>
  </ul>
</div>

3. Load the necessary JavaScript files in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/main.js"></script>

4. The necessary CSS styles for the site list.

.label {
  max-width: 561px;
  margin: 20px auto;
}

@media (max-width: 500px) {
  .label {
      max-width: 330px;
  }
}

.label .siteList {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-right: -14px;
}

.label .siteList li {
  margin-bottom: 10px;
  margin-right: 13px;
}

.label .siteList li:hover {
  cursor: pointer;
}

.label .siteList .site .link {
  font-size: 13px;
}

.label ul .last .addButton {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  /*color: rgb(var(--tile-title-color));*/
  /*margin-bottom: 10px;*/
}

.label i {
  font-size: 45px;
  padding-bottom: 10px;
}

.label ul .site {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.label ul .site .logo {
  width: 45px;
  height: 45px;
  line-height: 45px;
  font-size: 45px;
  text-align: center;
  margin-bottom: 10px;
  color: rgb(66, 133, 244);
}

.label ul .site .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: none;
}

.label ul .site .close i {
  font-size: 20px;
}

.label ul .site:hover .close {
  display: block;
}

---

This awesome jQuery plugin is developed by wl-1996. For more Advanced Usages, please check the demo page or visit the official website.