HomeHome  CalendarCalendar  FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  RegisterRegister  Log inLog in  
Navigation
 Portal
 Index
 Memberlist
 Profile
 FAQ
 Search
Discord Server


Share | 
 

 Floating Menu

View previous topic View next topic Go down 
AuthorMessage
Draxion



Posts : 1
Join date : 2017-05-01

PostSubject: Floating Menu   Mon May 01, 2017 11:42 am

JavaScript
Title: Anything you please
Placement: All pages or homepage
Code:
$(function() {
  $("body").append(
    '<div id="floatingMenu_body"><table border="0"><tr><td style="width:300px;" id="floatingMenu_img"></td></tr><tr><td style="width:300px;" id="floatingMenu_text"><div>Text goes here.</div></td></tr></table></div>'
  );
});

CSS
Code:

/********** LEAVE ALONE *****************/
#floatingMenu_body {
  bottom: 2px;
  left: 0;
  position: fixed;
}

#floatingMenu_text div {
  height: 90px !important;
  overflow-z: hidden;
  overflow-y: auto;
}
/****************************************/

#floatingMenu_img {
  background: url(https://images-ext-1.discordapp.net/eyJ1cmwiOiJodHRwczovL2kuaW1ndXIuY29tL2ZoVG1kY2wucG5nIn0.GuwadwtEfFHW2jwJMtYGj9KxHnY);
  background-position: -99px -10px;
  width: 300px;
  height: 200px;
}

#floatingMenu_text {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

#floatingMenu_text div::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  background-color: #000 !important;
}

#floatingMenu_text div::-webkit-scrollbar-thumb {
  background-color: #333 !important;
}

#floatingMenu_text div::-webkit-scrollbar-button {
  display: none !important;
}

To change the image, replace the link in between the parenthesis.
Code:
#floatingMenu_img {
  background: url(https://images-ext-1.discordapp.net/eyJ1cmwiOiJodHRwczovL2kuaW1ndXIuY29tL2ZoVG1kY2wucG5nIn0.GuwadwtEfFHW2jwJMtYGj9KxHnY);
  background-position: -99px -10px;
  width: 300px;
  height: 200px;
}

To change the text color, font, or background.
Code:
#floatingMenu_text {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

To change the color of the scrollbar in case you changed the color of the background.
Code:
#floatingMenu_text div::-webkit-scrollbar {
  width: 4px !important;
  height: 4px !important;
  background-color: #000 !important;
}

#floatingMenu_text div::-webkit-scrollbar-thumb {
  background-color: #333 !important;
}

#floatingMenu_text div::-webkit-scrollbar-button {
  display: none !important;
}
Back to top Go down
View user profile
 
Floating Menu
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» The Royal Oak Bed and Breakfast **Menu and Rules**
» The Menu
» Custom CSS: Compact, shorter posts/Profile Picture on the Left/Fix for "floating ponies"
» Axel's Temple
» ISLAND MAKING CONTEST!

Permissions in this forum:You cannot reply to topics in this forum
Resonance :: Hub :: Announcements & Updates-
Jump to: