https://github.com/mmgrant73/osxdock

OSX Dock - is a custom web component which is like the docking bar on the MacOS operation system that can be used on a website. It is easy to use and set up. Javascript, CSS, Javascript
https://github.com/mmgrant73/osxdock

component css css3 html5 javascript web

Last synced: 3 months ago
JSON representation

OSX Dock - is a custom web component which is like the docking bar on the MacOS operation system that can be used on a website. It is easy to use and set up. Javascript, CSS, Javascript

• Host: GitHub
• URL: https://github.com/mmgrant73/osxdock
• Owner: mmgrant73
• License: mit
• Created: 2020-02-08T08:53:10.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-10T06:05:14.000Z (over 6 years ago)
• Last Synced: 2025-02-25T17:45:32.239Z (over 1 year ago)
• Topics: component, css, css3, html5, javascript, web
• Language: CSS
• Homepage:
• Size: 571 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)

# OSX Dock:

### What is it?

OSX Dock - is a custom web component which is like the docking bar on the MacOS operation system that can be used on a website.  It is easy to 

use and set up.

![Alt text](https://github.com/mmgrant73/osxdock/blob/master/osxdock.png?raw=true "Image-osxdock")

[Click here for Demo](https://mmgrant73.github.io/osxdock/osxdock.html) 

### How to use it?

It is quite easy to use it on your webpage. Just follow the below steps:

1. Include the link to the script file that holds the this custom web component (osxdock.js) near the bottom of 

   the body section of your webpage.  See below

   

```

    

```

2.  Then use the custom element tags on your webpage.

```

    

        Facebook

        Google

        Github

    

```

Note: That is all you have to do to use this custom element.  There is an example HTML page (osxdock.html) that shows how to use it.

```

    

    

      

        OSX Dock Web Component

        

            body {

                background-color: rgb(90,90,90);

            }

            h1 {

                color: white;

                text-align: center;

            }

        

      

      

      

      

        
This is a demostration of the OSX Dock Web Component


        


            

                Facebook

                Google

                Github

            

        
 


        

      

      

    

```

### There are only three properties that you can use to customize this element.

There are three attributes that you need to set:

1. href - is the hyperlink that will become active when a user click on the icon in the dock bar

2. src - is the image that will be used in the dock bar

3. innerText - the innerText between the item tag will be display when the mouse is hovered over the icon

### To Do:

1. Add a way so one can style the dock bar

Note: You have to set the two attributes(href and src) and the innerText. 

Note: This was inspired by something I saw on https://zurb.com/lab.  Some of the CSS was dervied from this site.  

I expanded on it and converted it to a web component