myStickymenu - Version 1.0

Version Description

Download this release

Release Info

Developer damiroquai
Plugin Icon 128x128 myStickymenu
Version 1.0
Comparing to
See all releases

Version 1.0

Files changed (6) hide show
  1. mystickymenu.css +38 -0
  2. mystickymenu.js +7 -0
  3. mystickymenu.php +33 -0
  4. readme.txt +36 -0
  5. screenshot-1.png +0 -0
  6. screenshot-2.png +0 -0
mystickymenu.css ADDED
@@ -0,0 +1,38 @@
1
+ .navbar {
2
+ z-index: 100000;
3
+ /*add this line if you use 100% menu width, usually not needed*/
4
+ /*max-width: 100% !important;*/
5
+ text-transform:uppercase;
6
+ font-weight:bold;
7
+ -webkit-transition: 0.2s;
8
+ -moz-transition: 0.2s;
9
+ -o-transition: 0.2s;
10
+ transition: 0.2s;
11
+ }
12
+ .myfixed {
13
+ position: fixed;
14
+ top: 0;
15
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
16
+ filter: alpha(opacity=95);
17
+ opacity:.95;
18
+ background-color: #C94812 !important;
19
+ }
20
+ .nav-menu li a:hover {
21
+ background-color: #111 !important;
22
+ -webkit-transition: 0.6s;
23
+ -moz-transition: 0.6s;
24
+ -o-transition: 0.6s;
25
+ transition: 0.6s;
26
+ }
27
+ .nav-menu .current_page_item > a,
28
+ .nav-menu .current_page_ancestor > a,
29
+ .nav-menu .current-menu-item > a,
30
+ .nav-menu .current-menu-ancestor > a {
31
+ color: #fff !important;
32
+ font-style: normal !important;
33
+ background-color:#111 !important;
34
+ }
35
+ #wpadminbar {
36
+ position: absolute !important;
37
+ top: 0px !important;
38
+ }
mystickymenu.js ADDED
@@ -0,0 +1,7 @@
1
+ var navbar = document.querySelector('.navbar');
2
+ var origOffsetY = navbar.offsetTop;
3
+ function onScroll(e) {
4
+ window.scrollY >= origOffsetY ? navbar.classList.add('myfixed') :
5
+ navbar.classList.remove('myfixed');
6
+ }
7
+ document.addEventListener('scroll', onScroll);
mystickymenu.php ADDED
@@ -0,0 +1,33 @@
1
+ <?php
2
+ /*
3
+ Plugin Name: myStickymenu
4
+ Plugin URI: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
5
+ Description: Simple sticky (fixed on top) menu implementation for default Twentythirteen navigation menu. For other themes, if navigation class is different than .navbar change it to .your_navbar_class on the beggining of mystickymenu.js script ('.navbar') and inside mystickymenu.css.
6
+ Version: 1.0
7
+ Author: m.r.d.a
8
+ License: GPLv2 or later
9
+ */
10
+
11
+ //remove default option for more link that jumps at the midle of page and its covered by menu
12
+
13
+ function remove_more_jump_link($link) {
14
+ $offset = strpos($link, '#more-');
15
+ if ($offset) {
16
+ $end = strpos($link, '"',$offset);
17
+ }
18
+ if ($end) {
19
+ $link = substr_replace($link, '', $offset, $end-$offset);
20
+ }
21
+ return $link;
22
+ }
23
+ add_filter('the_content_more_link', 'remove_more_jump_link');
24
+
25
+ function mystickymenu_script() {
26
+
27
+ wp_enqueue_style('mystickymenu',WP_PLUGIN_URL.'/mystickymenu/mystickymenu.css', false,'1.0.0');
28
+ wp_register_script('mystickymenu', WP_PLUGIN_URL. '/mystickymenu/mystickymenu.js', false,'1.0.0', true);
29
+ wp_enqueue_script( 'mystickymenu' );
30
+
31
+ }
32
+ add_action( 'wp_enqueue_scripts', 'mystickymenu_script' );
33
+ ?>
readme.txt ADDED
@@ -0,0 +1,36 @@
1
+ === myStickymenu ===
2
+ Contributors: (Damiroquai)
3
+ Donate link: http://wordpress.transformnews.com
4
+ Tags: sticky menu, twentythirteen
5
+ Requires at least: 3.8
6
+ Tested up to: 3.8.1
7
+ Stable tag: 1.0
8
+ License: GPLv2 or later
9
+
10
+ This lightweight plugin will made your Twentythirteen menu sticky on top of page after scroll hits upper border.
11
+
12
+ == Description ==
13
+ Plugin is designed for Twentythirteen template but should work on any theme, it's using default twentythirteen ".navbar" css class and that should be modified for other themes if different.
14
+
15
+ Plugin Home + Demo URL: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
16
+
17
+
18
+ == Installation ==
19
+
20
+ Install like any other plugin. After install activate.
21
+
22
+ If using template other than Twentythirteen open wp-content/plugins/mystickymenu/mystickymenu.js and edit selector class based on your template navigation bar class.
23
+
24
+ "var navbar = document.querySelector('.navbar');"
25
+
26
+ "var navbar = document.querySelector('.your_navbar_class');"
27
+
28
+
29
+ Edit /mystickymenu/mystickymenu.css to edit menu style, width, color...
30
+ Original javascript used from http://jsbin.com/omanut/2/edit
31
+
32
+
33
+
34
+ == Screenshots ==
35
+ 1. screenshot-1.png in plugin folder shows menu when page is opened, and not scrolled.
36
+ 2. screenshot-2.png shows menu when page is scrolled towards the bottom.
screenshot-1.png ADDED
Binary file
screenshot-2.png ADDED
Binary file