[3.3][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Get Involved
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
ivailo95
Registered User
Posts: 1097
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by ivailo95 »

okay
i will show you a video of example in one other forum
where this navbar is used static and moveable
https://youtu.be/6ugC8jz4yx8
For REALLY good and VERY cheap hosting CLICK HERE
Watch "Lost in a random" game, it's the best
User avatar
ivailo95
Registered User
Posts: 1097
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by ivailo95 »

Do you understand me now? :roll:
For REALLY good and VERY cheap hosting CLICK HERE
Watch "Lost in a random" game, it's the best
User avatar
ivailo95
Registered User
Posts: 1097
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by ivailo95 »

?
For REALLY good and VERY cheap hosting CLICK HERE
Watch "Lost in a random" game, it's the best
Badhon_raj
Registered User
Posts: 209
Joined: Wed Jan 04, 2012 6:33 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by Badhon_raj »

ivailo95 wrote: Tue Dec 18, 2018 3:17 pm Do you understand me now? :roll:
ok, I understand this.
You want a settings button on the navbar to switch between static/fixed mode.

I'll just send you the code they used in their site.
I'm not sure if I'll include this in the extension though.


ext/orthohin/navbar/styles/all/template/event/overall_header_body_before.html

Code: Select all

<style type="text/css">
  .bootstrap .navbar .nav > li > a:hover,
  .bootstrap .navbar .nav > li > a:focus {
    background-color: rgba(0,0,0,0.10) !important;
  }
  <!-- IF IS_COLOR -->
  .bootstrap .navbar .nav > li > a,
  /*.bootstrap .navbar ul.dropdown-menu,*/
  .bootstrap .navbar {
    background-color: {BACKGROUND_COLOR};
  }
  .bootstrap .navbar .navbar-toggle .icon-bar{
    background-color: {TEXT_COLOR};
  }
  a.navbar-brand,
  a.navbar-brand:hover,
  .bootstrap .navbar .nav > li > a {
    color: {TEXT_COLOR};
  }
  <!-- ENDIF -->
</style>

<div class="bootstrap">
  <nav class="navbar yamm <!-- IF not IS_COLOR --> navbar-default <!-- ENDIF -->navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!-- IF LOGO_IMAGE_EXIST -->
            <img height= "50px" src="{LOGO_FILENAME}" alt="{SITENAME}"/>
          <!-- ELSE -->
            <a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITENAME}</a>
          <!-- ENDIF -->
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav <!-- IF MENU_POSITION -->navbar-right<!-- ENDIF -->">
          <!-- BEGIN menu -->
            <!-- IF menu.IS_MEGA -->
            <li class="drop-down">
              <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
              <ul class="dropdown-menu mega-menu">

                    {menu.MEGA_HTML}

              </ul>
            </li>
              <!-- ELSE -->
              <li>
                <!-- IF not .menu.sub -->
                <a href="{menu.URL}"<!-- IF menu.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{menu.ICON}"></i>&nbsp;{menu.NAME}</a>

                <!-- ELSE -->
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="{menu.ICON}"></i>&nbsp;{menu.NAME} <span class="caret"></span></a>
                <!-- ENDIF -->
                <!-- IF .menu.sub -->
                <ul class="dropdown-menu">
                  <!-- BEGIN sub -->
                  <li><a href="{sub.URL}"<!-- IF sub.EXTERNAL --> target="_blank"<!-- ENDIF -->><i class="{sub.ICON} icon-flip-horizontal"></i>&nbsp;{sub.NAME}</a></li>
                  <!-- END sub -->
                </ul>
                <!-- ENDIF -->
              </li>
            <!-- ENDIF -->
          <!-- END menu -->
            <li>
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style=""><i class="fa fa-cog"></i>&nbsp;<span class="caret"></span></a>
              
              <ul class="dropdown-menu">
                <li><a href="#" id="makeStatic">Static</a></li>
                <li><a href="#" id="makeFixed">Fixed</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>


ext/orthohin/navbar/styles/all/template/event/overall_footer_body_after.html

Code: Select all

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).on('click', '.yamm .dropdown-menu', function(e) {
  e.stopPropagation()
});

	// https://amxx-bg.info
	// 1fRaNkkK
	const body             = document.querySelector('body');
	const navbar           = document.querySelector('nav.navbar.yamm');
	const navbarMakeStatic = document.querySelector('#makeStatic');
	const navbarMakeFixed  = document.querySelector('#makeFixed');
	
	navbarMakeStatic.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'fixed');
		window.location.reload(true);
	});
	navbarMakeFixed.addEventListener('click', function () {
		localStorage.setItem('defaultNav', 'static');
		window.location.reload(true);
	});

	if (localStorage.getItem('defaultNav') === 'fixed') {

		navbar.classList.remove('navbar-fixed-top');
	 	navbar.classList.add('navbar-static-top');
		body.style.paddingTop = '0';

	} else if (localStorage.getItem('defaultNav') === 'static') {

		navbar.classList.remove('navbar-static-top');
	 	navbar.classList.add('navbar-fixed-top');
		body.style.paddingTop = '80px';

	}
</script>
User avatar
ivailo95
Registered User
Posts: 1097
Joined: Tue Sep 05, 2017 8:00 am
Location: Bulgaria
Name: Ivailo

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by ivailo95 »

Thanks a lot ! :idea:
by the way maybe need to add following options:
:idea: Display only for Moderators: :idea:
:idea: Display only for Administrators: :idea:
For REALLY good and VERY cheap hosting CLICK HERE
Watch "Lost in a random" game, it's the best
fabiomaticus
Registered User
Posts: 135
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by fabiomaticus »

How to decrease the height of the menu?
fabiomaticus
Registered User
Posts: 135
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by fabiomaticus »

What size should be 'logo image? I try to load an image but the system returns a blank page
Badhon_raj
Registered User
Posts: 209
Joined: Wed Jan 04, 2012 6:33 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by Badhon_raj »

fabiomaticus wrote: Fri Oct 18, 2019 9:23 am What size should be 'logo image? I try to load an image but the system returns a blank page
Create this folder manually and give it 777 permission
ext/orthohin/navbar/images/logo
fabiomaticus
Registered User
Posts: 135
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by fabiomaticus »

I have set to menu color #232f3e and i have set to phpbb navbar color #a6a6a6

This is result:
Image

If i set to phpbb navbar "background-image: linear-gradient(180deg, #a6a6a6, #ffffff);"

This is result
Image

Why?
Badhon_raj
Registered User
Posts: 209
Joined: Wed Jan 04, 2012 6:33 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by Badhon_raj »

fabiomaticus wrote: Sat Nov 02, 2019 8:04 am I have set to menu color #232f3e and i have set to phpbb navbar color #a6a6a6

This is result:
Image

If i set to phpbb navbar "background-image: linear-gradient(180deg, #a6a6a6, #ffffff);"

This is result
Image

Why?
What exactly do you want?
You are setting the background color in the UI, then override it in custom CSS.
What are you expecting it to do?
Either use the UI, or custom CSS. why both?
fabiomaticus
Registered User
Posts: 135
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by fabiomaticus »

I want color navbar menu to #232f3e like the first image
Badhon_raj
Registered User
Posts: 209
Joined: Wed Jan 04, 2012 6:33 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by Badhon_raj »

fabiomaticus wrote: Sat Nov 02, 2019 9:28 am I want color navbar menu to #232f3e like the first image
then why adding the CSS?
fabiomaticus
Registered User
Posts: 135
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by fabiomaticus »

Ok.
So, I use custom css or UI.
Badhon_raj
Registered User
Posts: 209
Joined: Wed Jan 04, 2012 6:33 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by Badhon_raj »

fabiomaticus wrote: Sat Nov 02, 2019 9:55 am Ok.
So, I use custom css or UI.
If you want color navbar menu to #232f3e like the first image, then just use UI.
disable custom CSS.
cheffen
Registered User
Posts: 1
Joined: Thu Jan 02, 2020 12:55 pm

Re: [3.1][3.2][DEV] MegaMenu, Sticky Menu, Navbar for phpBB

Post by cheffen »

Hi , is it possible give permission (user/moderator/administrator) to a pacfic dropdown ?

Return to “Extensions in Development”