Jump to content


Photo

MFL Mobile Menu - replacement mobile menu


8 replies to this topic

#1 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 02 June 2017 - 06:51 PM

This will display a mobile menu for devices screen width 768px or smaller , that will replace the current mobile menu MFL is using

 

Brought to you by Habman/TOS

 

DEMO HERE (view on your mobile device or pull your browser window width down) - http://www66.myfanta...ns?L=42271&O=07

 

 

NOTE !! - IF USING THE COMMISSIONER ABILITIES SCRIPT - please recopy the small script snippet in the first post on link below, so the abilities link will display on this new menu - http://forums.myfant...showtopic=35603

Look for this - // DISPLAY A LINK IN THE COMMISSIONER MENU FOR THE MFL MENU OR THE MOBILE REPLACEMENT MFL MENU 

 

 

Place the script in a header message. This must be placed as the first script to run on your site after jQuery library is loaded.

 

<!-- MFL MOBILE MENU -->
<script>
var menuPositionY = 10;         // Set px distance for menu to be displayed from top of page
var menuPositionIsLeft = true;  // Set to true to show menu on left side of page; false for right
var showMenuIcons = true;      // Set to false to remove icons from left side of text on menu list
</script>

<script src="//www.nitrografixx.com/MFL-MobileMenu/mfl-mobileMenu.js"></script>

 

If you are already loading the Lineup script , there is no need to reload font-awesome again , but if you are not loading it , then add this 

<script src="//use.fontawesome.com/6ccd97559b.js"></script> 

 

Place this css in your uploaded stylesheet and color as needed , its marked up pretty clearly and not much work at all to color this menu

/* PLACE THIS IN YOUR UPLOADED STYLESHEET FOR MOBILE MENU REPLACEMENT SCRIPT */

/* CHANGE MENU COLORS TO MATCH YOUR SITE */
   /* menu button pullout */
#menu-trigger{background:#e9ebf0;border:1px solid #263e68;color:#263e68;}
   /* menu container */
.myfantasyleague_menuMobile{background:#e9ebf0;border-color:#e9ebf0!important}
   /* text color for first level items */
.myfantasyleague_menuMobile > ul > li > a,.myfantasyleague_menuMobile > ul > li > a:active,
.myfantasyleague_menuMobile > ul > li > a:visited,.myfantasyleague_menuMobile > ul > li > a:hover {color:#fff}
   /* text color for first level inner links */
.myfantasyleague_menuMobile > ul > li > ul > li > a,.myfantasyleague_menuMobile > ul > li > ul > li > a:active,
.myfantasyleague_menuMobile > ul > li > ul > li > a:visited,.myfantasyleague_menuMobile > ul > li > ul > li > a:hover {color:#fff}
   /* text color for second level inner links */
.myfantasyleague_menuMobile > ul > li > ul > li > ul > li > a,.myfantasyleague_menuMobile > ul > li > ul > li > ul > li > a:active,
.myfantasyleague_menuMobile > ul > li > ul > li > ul > li > a:visited,.myfantasyleague_menuMobile > ul > li > ul > li > ul > li > a:hover {color:#fff}
   /* background for menu links */
.myfantasyleague_menuMobile a {background:#263e68;border-bottom:1px solid rgba(255,255,255,.2)}
   /* background for active first level drop down menu links */
.myfantasyleague_menuMobile > ul > li.has-sub.arrow-down > a{background:#cd2122}
   /* arrow right color for first level drop items */
.myfantasyleague_menuMobile > ul > li.has-sub > a:after {color:#fff}
   /* arrow down color for first level drop items */
.myfantasyleague_menuMobile > ul > li.has-sub.arrow-down > a:after {color:#fff}
   /* arrow right color for second level drop items */
.myfantasyleague_menuMobile > ul > li.has-sub > ul > li.has-sub > a:after {color:#fff}
   /* arrow down color for second level drop items */
.myfantasyleague_menuMobile > ul > li.has-sub > ul > li.has-sub.sub-arrow-down > a:after {color:#cd2122}
   /* background and text color for active second level drop items */
.myfantasyleague_menuMobile > ul > li.has-sub > ul > li.has-sub.sub-arrow-down > a{background:#fff;color:#cd2122}

/* RESPONSIVE STYLE TO SHOW MENU */
@media only screen and (max-width: 48em){
  #menu-trigger,.myfantasyleague_menuMobile{display:block!important}
  .myfantasyleague_menu,#icon-wrapper,.myfantasyleague_menu .notification-icon-login,.myfantasyleague_menu .notification-icon-search,.pageheader .welcome{display:none;}
}

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 04 June 2017 - 01:40 PM

add var to position menu on left or right side of your page , also position from top of page


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#3 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 05 June 2017 - 06:21 AM

var added to display icons by menu items

var showMenuIcons = true; // Set to false to remove icons from left side of text on menu list 

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#4 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 430 posts
  • Gender:Male
  • Location:Greenville, SC

Posted 18 June 2017 - 04:08 AM

Hey TOS,

 

I'm having an issue with the mobile menu on a couple of sites.

 

The script is loaded in the first HPM with the jQuery library and neither the MFL mobile menu or the replacement mobile menu are working properly.

 

Can you take a look and see what needs to be fixed?

 

http://www73.myfanta...17/home/37302#0

 

Thanks!



#5 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,461 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 18 June 2017 - 07:16 AM

looks like you got it fixed , i see the mobile menu displaying in IE,FF,Chrome , mobile safari , mobile chrome 

 

looks like you need to add font awesome though


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#6 JackrabbitSlim22

JackrabbitSlim22

    Veteran

  • Members
  • PipPipPip
  • 67 posts
  • Gender:Male

Posted 07 August 2017 - 09:01 AM

Will this change the format of the MFL 2017 app? Am I reading this correctly? 



#7 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts
  • Gender:Male

Posted 07 August 2017 - 09:14 AM

Will this change the format of the MFL 2017 app? Am I reading this correctly? 

 

Nothing on these forums has anything to do with a 3rd party non-supported MFL App.

 

If you are using the word "app" (incorrectly) to refer to the mobile view of your regular MFL webpage (on a browser)... then the answer is yes.



#8 JackrabbitSlim22

JackrabbitSlim22

    Veteran

  • Members
  • PipPipPip
  • 67 posts
  • Gender:Male

Posted 07 August 2017 - 09:28 AM

Thanks for the clarification. We have several users using the MFL 2017 app, did not realize it was a third party non supported.

 

Looks like I need to get them all back to using the website. :)



#9 sackdaddy

sackdaddy

    Veteran

  • Members
  • PipPipPip
  • 70 posts
  • Gender:Male

Posted 05 October 2018 - 10:05 AM

EDIT: I found a different solution, no rush on this.

 

Hey guys, just curious, is there a way to get the Player Search that you guys added with the POPUPS add-on to show up on this Mobile Menu? The notifications popup shows up but I can't get the player search to show up





Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users