× Didn't find what you were looking for? Ask a question
Top Posters
Since Sunday
5
o
5
4
m
4
b
4
x
4
a
4
l
4
t
4
S
4
m
3
s
3
New Topic  
bio_man bio_man
wrote...
Administrator
Valued Member
Educator
Posts: 33224
9 years ago
I've implemented a floating menu using the following codes. You may implement this into any working version of SMF.

Styling (in styling sheet)

Code:
#top_menu {display:none; background: #88A6C0 url(images/mini_logo.png) no-repeat 2em center; height:40px; border-bottom: 2px solid #33587A;
color:#f5f5f5; padding:5px 0 0 13px; top:0; left: 0; position:fixed; z-index:9999; width:100%; box-shadow:0 3px 5px rgba(0,0,0,0.2)}
#top_menu div {display: inline-block; float: right; margin-right: 2em;}
#top_menu div table td img {width: 30px; height: 30px;}
#top_menu div table td {color: white;}
#top_menu div table td a {color: white;}
#top_menu div table td a:hover {text-decoration: none; text-shadow: 0 0 10px white;}
#top_menu .tdimg {width: 32px; text-align: center;}
@media screen and (min-width: 800px) {.fixed_menu {display:block!important}}

Template (inside index.template.php)

Code:
<div id="top_menu">
<a href="', $scripturl, '" style="width: 200px; left: 0; top: 0; padding-right: 300px; padding-bottom: 30px; margin-left: 1em;"></a>
<div>
<table width="100%" cellpadding="2" cellspacing="0">
<tr>
<td class="tdimg">
<img src="', $settings['images_url'], '/edit_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="', $scripturl, '?blog=1.0">
Blog
</a>
</td>
<td class="tdimg">
<img src="', $settings['images_url'], '/img_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="', $scripturl, '?action=gallery">
Gallery
</a>
</td>
<td class="tdimg">
<img src="', $settings['images_url'], '/dict_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="'.$boardurl.'/definitions">
Dictionary
</a>
</td>
</tr>
</table>

</div></div>';

Script (inside index.template.php, before the body - make sure to wrap <script> labels around it)

Code:
$(window).scroll(function () {
var $this = $(this),
 $head = $("#top_menu");
if ($this.scrollTop() > 300) {
$head.addClass("fixed_menu");
} else {
$head.removeClass("fixed_menu");
}
});
 Attached file 
Thumbnail(s):
You must login or register to gain access to this attachment.
Read 2559 times
1 Reply

Related Topics

Replies
bio_man Author
wrote...
Valued Member
Educator
9 years ago
I decided to change it up a little and make the floating menu a bit more function.
 Attached file 
Thumbnail(s):
You must login or register to gain access to this attachment.
New Topic      
Explore
Post your homework questions and get free online help from our incredible volunteers
  974 People Browsing
Related Images
  
 344
  
 249
  
 49
Your Opinion
What's your favorite math subject?
Votes: 293