snippets-css-and-js

KO | EN

gitlite — search

#python #react #ai #golang #docker #java #nodejs #windows #awesome #kubernetes #awesome-list #pytorch #ios #openai

snippets-css-and-js

(★ 8)

Code snippets for my classes of Design of Web Interfaces: CSS, js, Bootstrap and more

snippets-css-and-js 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# CSS AND JS SNIPPETS

:warning: This repo is a work in progress :warning:

A collection of snippets for my classes of the module _Design of Web Interfaces_. Copy them and modify the code to adapt to your application.
Remember always try to improve your code and remove what is unnecessary (certainly you can improve these snippets too!!)

## Short Snippets

- [x] Including CSS and JS files in an HTML doc

### Advanced CSS

- [X] CSS Flexbox
- [X] CSS Grid

## Interactive Elements

- [x] [Accordion - Basic example](https://www.w3schools.com/howto/howto_js_accordion.asp)
- [x] [Animated Search bar input field](https://www.w3schools.com/howto/howto_css_searchbar.asp). I.e: wook.pt, onallibres.cat, casadellibro.com
- [x] [Basic Animated Search Input](https://www.w3schools.com/howto/howto_css_animated_search.asp)
- [x] [Manual Slideshow](https://www.w3schools.com/howto/howto_js_slideshow.asp)
- [x] [Automatic Slideshow I](https://www.freecodecamp.org/news/how-to-create-a-slideshow/ ) / [Automatic Slideshow II](https://codepen.io/AndresUris/pen/rGXpvE)
- [x] Cookies Alert: [on Top in bbc.com](https://www.bbc.com/) ([also here](https://www.gov.uk/)) / [at the bottom and using opacity](https://www.mirror.co.uk/) / [centered](https://www.msn.com/es-es/noticias/)

### Menu

- [x] **Top Menu simple**. A simple and complete top navigation menu. Uses &lt;ul&gt; 
  - Com crear un Dropdown totsol: [aqui funciona amb _hover_](https://www.w3schools.com/howto/howto_css_dropdown.asp) i [aqui, en clicar a sobre](https://www.w3schools.com/howto/howto_js_dropdown.asp)
  - El mateix exemple amb diferent implementació: [aqui](https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp)
- [x] **Top Menu semiresponsive**. El primer element del menu superior es manté en fer-se responsive. Codi original: [aqui](https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp)
- [x] **Tom Menu total responsive**. Tots els elements s'oculten en fer-se responsiu. Se dedueix fàcilment de l'anterior. **Atenció**: tant aquest com l'anterior menu, si se volen emprar en MÒBIL, s'hauria de modificar el menu per a desplegar-se en clicar, no en navegar per sobre (_hover_)
- [x] **Top Menu mobile**. Per a mòbil. No inclou submenus. Codi original [aquí](https://www.w3schools.com/howto/howto_js_mobile_navbar.asp)
- [x] https://css-tricks.com/solved-with-css-dropdown-menus/

#### Sidebar

- [x] **Fixed Sidebar Menu**. Fés-li un cop d'ull [aquí](https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp)
- [x] **Fixed Sidebar Menu w/Dropwown**. Fés-li un cop d'ull [aqui](https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp)
- [x] **Responsive Sidebar Menu**. Un menu sidebar se pot fer responsive molt més fàcilment que un top nav menu. Codi original: [aqui](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidebar_responsive)

#### Variations

- [x] **Top Menu Fixed**. en fer scroll, manté la seva posició. Doman el valor `position: fixed` al menu superior.
- [x] **Top Menu Hide on scroll**. Codi original [aqui](https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp)
- [x] **Mega Menu**. Just like a simple top menu, with more areas. Fés-li un cop d'ull [aquí](https://www.w3schools.com/howto/howto_css_mega_menu.asp)
- [x] **Sub Navigation Menu**. El dropdown desplegat és horitzontal en lloc de vertical. Fés-li un cop d'ull [aquí](https://www.w3schools.com/howto/howto_css_subnav.asp)
- [x] **Full Screen Overlay Navigation***. El menú es desplega a tota pàgina, amb una _CSS transition_: [aqui](Full screen Overlay Navigation)

### Modal (Pop Up) Windows

A **Pop Up** is a window that appears in top of the contents that’s being displayed in the viewport. It’s limited to a small area and has a limited function (normally a form or a warning)

- [x] [Basic Example](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup_form)

### Overlay

An **Overlay** it’s an area that appears in top of the contents that’s being displayed in the viewport

- [x] [Full screen overlay effect (with Transition and opacity effect](https://www.w3schools.com/howto/howto_css_overlay.asp)
- [x] [Full Screen Transition Overlay (with also a Transition on the text of the links)](https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp)

### Parallax Effect

Parallax is the apparent displacement of a object because there's movement in the observer.

- [x] Basic parallax with fixed image. La imatge es manté fixa i en fer scroll, el text hi passa per sobre. Codi original [aqui](https://www.w3schools.com/howto/howto_css_parallax.asp)
- [x] Use a library to implement Parallax effect that add a dynamic feel to your interfaces. For instance: [simplePARALLAX.js](https://simpleparallax.com)

### Tabs

- [x] [Basic Tab example](https://www.w3schools.com/howto/howto_js_tabs.asp)

![logo](https://raw.githubusercontent.com/classicoman2/snippets-css-and-js/master/logo-classicoman-optim.png)

snippets-css-and-js

snippets-css-and-js 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

snippets-css-and-js

snippets-css-and-js 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README