1. Мы продолжаем публиковать интересные статьи на тему SocialEngine 4. Одна из статей посвящена правильному выбору сервера для вашей социальной сети, а другая содержит советы по увеличению производительности платформы. Также мы добавили большую статью о пользовательских уровнях. Ознакомиться со статьями вы можете в разделе Вопросы и Ответы SocialEngine 4.

  2. Вам кажется, что ваша версия SocialEngine 4, работает медленно?

    Голосуйте. Пишите свою версию системы, железо на чем работает и количество пользователей. Будем увеличивать производительность :-) Подробнее

  3. В связи с участившимися случаями попыток продажи пользователями форума различных "сборок" коммерческих социальных платформ, обычно основанных на SocialEngine 3, вводится новое правило для форума. Запрещается создание тем или размещение в уже созданных предложений о продаже или размещение ссылок на сайты, где происходит продажа "сборок". Пользователи, которые продолжат свою коммерческую деятельность в данном направлении, будут заблокированы. Подробнее.
Новые полезные статьи о SocialEngine 4 Ваш SocialEngine 4 медленно работает? Запрет на размещение информации о "Сборках"

CSS меню

Discussion in 'Templates' started by Gooos, Aug 19, 2011.

Page 1 of 2

  1. Gooos Thread starter абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Это меню работает на css без яваскриптов.

    Screenshot_1.png

    Это меню можно переделать под любой дизайн, достаточно иметь знания в html и уметь рисовать в PS (ФотоШоп)
    Реализацию данного меню можно увидеть применительно к SE3 на сайте sportprofile.ru, где меню реализовано как главное, так и пользовательское, а так-же в плагине "ссылки" (новости)

    Attached Files:

    Gooos, Aug 19, 2011
    #1

  2. smokealone3 User


    Offline
    Message Count:
    128
    Likes Received:
    32
    не вредничей роскажи как его дунут в 4 версию ? перечислу те 4 еуро ... сможеш радуватса клиент ... !
    smokealone3, Sep 10, 2011
    #2

  3. zqz User


    Offline
    Message Count:
    230
    Likes Received:
    9
    My version of SE:
    3.16
    Прошу прощения что пишу в неактуальной теме.просто сильно хочу установить меню подскажите как?Заранее спасибо!
    zqz, Aug 3, 2012
    #3

  4. Gooos Thread starter абырвалГ


    Offline
    • Admin
    Message Count:
    2,435
    Likes Received:
    645
    My version of SE:
    3.20
    Надо просто заменить стандартное меню этим. Это делается путём замены html кода в шаблоне и добавлением стилей в css. Делать надо аккуратно, не потеряв переменные меню. Процесс не простой, т.к. это всего лишь пример, а не готовое решение.

    Запрос в гугл css3 menu выдаст массу различных вариантов.
    Gooos, Aug 3, 2012
    #4

  5. zqz User


    Offline
    Message Count:
    230
    Likes Received:
    9
    My version of SE:
    3.16
    Помаги с установкой пожалуйста!

    Вот меню
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        #g { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;}
        /* g_menu */
        #g_menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #g_menu a { color:#fff; text-decoration:none; }
        #g_menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #g_menu > li a:hover {color:#3399FF;}
        #g_menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-g_menus*/
        #g_menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #g_menu li { font-weight: bold;}
        #g_menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:160px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
        #g_menu li:hover ul { display:block;}
        #g_menu li ul li{ display:block; margin:5px 20px; padding: 2px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #g_menu li ul li:first-child { border-top: none; }
        #g_menu li ul li a { display:block; color:#FFF; }
        #g_menu li ul li a:hover { color:#3399FF; }
        /* main subg_menu */
        #g_menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #g_menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #g_menu .corner_inset_right { position:absolute; top:0px; left:160px;}
        #g_menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #g_menu .corner_left { position:absolute; left:0px; top:0px;}
        #g_menu .corner_right { position:absolute; left:142px; top:0px;}
        #g_menu .middle { position:absolute; left:18px; height: 20px; width: 125px; top:0px;}
    </style>
</head>
<body>
    <div id="g" style="margin-left:5px;">
        <ul id="g_menu">
            <li class="logo">
                <img style="float:left;" alt="" src="g_wimeo/g_menu_left.png"/>
                <ul id="main">
                    <li>Добро пожаловать в <b>Vimeo-like навигацию</b> от Gooos!<br /></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_blue_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot_blue.png"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_blue_right.png"/>
                    </li>
                </ul>
            </li>
            <li><a href="#">Главная</a>
            </li>
            <li><a href="#">Пригласить</a>
            </li>
            <li><a href="#">Альбомы</a>
            </li>
            <li><a href="#">Дневник</a>
            </li>
            <li><a href="#">Группы</a>
            </li>
            <li><a href="#">Больше...</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="g_wimeo/corner_inset_left.png"/>
                        <a href="#">Видео</a>
                        <img class="corner_inset_right" alt="" src="g_wimeo/corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Опросы</a></li>
                    <li><a href="#">Какое-то меню</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot.gif"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_right.png"/>
                    </li>
                </ul>
            </li>
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="g_wimeo/magnifier.png" alt="Искать" title="Искать" />
                </div>
                <ul id="search">
                    <li>
                        <img class="corner_inset_left" alt="" src="g_wimeo/corner_inset_left.png"/>
                        <a href="#">Расширенный поиск</a>
                        <img class="corner_inset_right" alt="" src="g_wimeo/corner_inset_right.png"/>
                    </li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot.gif"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_right.png"/>
                    </li>
                </ul>
            </li>
        </ul>
        <img style="float:left;" alt="" src="g_wimeo/g_menu_right.png"/>
    </div>
    <div style="float:none; clear:both;"></div>
 
 
 
 
 
</body>
</html>
    Мой header_global.tpl
    Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
{* $Id: header_global.tpl 146 2009-03-27 02:48:07Z john $ *}
<head>
 
<title>{lang_print id=642}{if $global_page_title != ""} - {lang_sprintf id=$global_page_title[0] 1=$global_page_title[1] 2=$global_page_title[2]}{/if}</title>
<base href='{$url->url_base}' />
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name='Description' content="{if $global_page_description != ""}{lang_sprintf id=$global_page_description[0] 1=$global_page_description[1] 2=$global_page_description[2]}{else}{lang_print id=1156}{/if}" />
 
 
{* Corner *}
<script type="text/javascript" src="./include/js/corner.js"></script>
{* /Corner *}
 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script>
    var $jq = jQuery.noConflict();
</script> 
 
 
<script type="text/javascript">
</script>
 
 
 
{* INLUCDE MAIN STYLESHEET *}
<link rel="stylesheet" href="./templates/styles_global.css" title="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="./templates/styles.css" title="stylesheet" type="text/css" /> 
 
{* CODE FOR VARIOUS JAVASCRIPT-BASED FEATURES, DO NOT REMOVE *}
<script type="text/javascript" src="./include/js/mootools12-min.js"></script>
{*
<script type="text/javascript" src="./include/js/mootools12.js"></script>
<script type="text/javascript" src="./include/js/mootools12-more.js"></script>
*}
 
<script type="text/javascript" src="./include/js/core-min.js"></script>
{*
<script type="text/javascript" src="./include/js/autogrow.js"></script>
<script type="text/javascript" src="./include/js/smoothbox.js"></script>
<script type="text/javascript" src="./include/js/autosuggest.js"></script>
<script type="text/javascript" src="./include/js/sprintf.js"></script>
<script type="text/javascript" src="./include/js/class_base.js"></script>
<script type="text/javascript" src="./include/js/class_core.js"></script>
<script type="text/javascript" src="./include/js/class_language.js"></script>
<script type="text/javascript" src="./include/js/class_url.js"></script>
<script type="text/javascript" src="./include/js/class_comments.js"></script>
<script type="text/javascript" src="./include/js/class_tags.js"></script>
<script type="text/javascript" src="./include/js/class_user.js"></script>
*}
 
{* INSTALIZE API *}
<script type="text/javascript">
<!--
  var SocialEngine = new SocialEngineAPI.Base();
 
  // Core
  SocialEngine.Core = new SocialEngineAPI.Core();
  SocialEngine.Core.ImportSettings({$se_javascript->generateSettings($setting)});
  SocialEngine.Core.ImportPlugins({$se_javascript->generatePlugins($global_plugins)});
  SocialEngine.RegisterModule(SocialEngine.Core);
 
  // URL
  SocialEngine.URL = new SocialEngineAPI.URL();
  SocialEngine.URL.ImportURLBase({$se_javascript->generateURLBase($url)});
  SocialEngine.URL.ImportURLInfo({$se_javascript->generateURLInfo($url)});
  SocialEngine.RegisterModule(SocialEngine.URL);
 
  // Language
  SocialEngine.Language = new SocialEngineAPI.Language();
  SocialEngine.RegisterModule(SocialEngine.Language);
 
  // User - Viewer
  SocialEngine.Viewer = new SocialEngineAPI.User();
  SocialEngine.Viewer.ImportUserInfo({$se_javascript->generateUserInfo($user)});
  SocialEngine.RegisterModule(SocialEngine.Viewer);
 
  // User - Owner
  SocialEngine.Owner = new SocialEngineAPI.User();
  SocialEngine.Owner.ImportUserInfo({$se_javascript->generateUserInfo($owner)});
  SocialEngine.RegisterModule(SocialEngine.Owner);
 
  // Back
  SELanguage = SocialEngine.Language;
//-->
</script>
 
 
{literal}
<script type="text/javascript">
<!--
  // ADD TIP FUNCTION
  window.addEvent('load', function()
  {
    var Tips1 = new Tips($$('.Tips1'));
  });
//-->
</script>
{/literal}
 
 
{* ASSIGN PLUGIN MENU ITEMS AND INCLUDE NECESSARY STYLE/JAVASCRIPT FILES *}
{hook_include name=header}
{hook_foreach name=styles var=hook_stylesheet}
<link rel="stylesheet" href="{$hook_stylesheet}" title="stylesheet" type="text/css" />
{/hook_foreach}
{hook_foreach name=scripts var=hook_script}
<script type="text/javascript" src="{$hook_script}"></script>
{/hook_foreach}
 
 
{* INSERT USER'S CUSTOM CSS IF ANY *}
<style type='text/css'>{$global_css}</style>
 
</head>
<body>
 
{* GLOBAL IFRAME FOR AJAX FUNCTIONALITY *}
<iframe id='ajaxframe' name='ajaxframe' style='display: none;' src='javascript:false;'></iframe>
    zqz, Aug 3, 2012
    #5

  6. tmb User


    Offline
    Message Count:
    151
    Likes Received:
    49
    My version of SE:
    3.20
    My version of phpFox:
    3.3.0
    zqz всё же подробно описали...не всё достаётся так просто...просто пошевели немного мозгами...замена кода в tpl и добавить css...или ето так сложно
    tmb, Aug 3, 2012
    #6

  7. zqz User


    Offline
    Message Count:
    230
    Likes Received:
    9
    My version of SE:
    3.16
    Чёт туплю
    это в styles.css ?????
    Code:
     #g { font-family:Arial, Helvetica, Sans-Serif; font-size:12px; margin:0px 20px;}
        /* g_menu */
        #g_menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
        #g_menu a { color:#fff; text-decoration:none; }
        #g_menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
        #g_menu > li a:hover {color:#3399FF;}
        #g_menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
        /* sub-g_menus*/
        #g_menu ul { padding:0px; margin:0px; display:block; display:inline;}
        #g_menu li { font-weight: bold;}
        #g_menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:160px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
        #g_menu li:hover ul { display:block;}
        #g_menu li ul li{ display:block; margin:5px 20px; padding: 2px 0px;  border-top: dotted 1px #606060; list-style-type:none; }
        #g_menu li ul li:first-child { border-top: none; }
        #g_menu li ul li a { display:block; color:#FFF; }
        #g_menu li ul li a:hover { color:#3399FF; }
        /* main subg_menu */
        #g_menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
        /* search */
        .searchContainer div { background-color:#fff; display:inline; padding:5px;}
        .searchContainer input[type="text"] {border:none;}
        .searchContainer img { vertical-align:middle;}
        /* corners*/
        #g_menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
        #g_menu .corner_inset_right { position:absolute; top:0px; left:160px;}
        #g_menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
        #g_menu .corner_left { position:absolute; left:0px; top:0px;}
        #g_menu .corner_right { position:absolute; left:142px; top:0px;}
        #g_menu .middle { position:absolute; left:18px; height: 20px; width: 125px; top:0px;}
    </style>
    А это в header_global.tpl ????????
    Code:
      <div id="g" style="margin-left:5px;">
        <ul id="g_menu">
            <li class="logo">
                <img style="float:left;" alt="" src="g_wimeo/g_menu_left.png"/>
                <ul id="main">
                    <li>Добро пожаловать в <b>Vimeo-like навигацию</b> от Gooos!<br /></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_blue_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot_blue.png"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_blue_right.png"/>
                    </li>
                </ul>
            </li>
            <li><a href="#">Главная</a>
            </li>
            <li><a href="#">Пригласить</a>
            </li>
            <li><a href="#">Альбомы</a>
            </li>
            <li><a href="#">Дневник</a>
            </li>
            <li><a href="#">Группы</a>
            </li>
            <li><a href="#">Больше...</a>
                <ul id="help">
                    <li>
                        <img class="corner_inset_left" alt="" src="g_wimeo/corner_inset_left.png"/>
                        <a href="#">Видео</a>
                        <img class="corner_inset_right" alt="" src="g_wimeo/corner_inset_right.png"/>
                    </li>
                    <li><a href="#">Опросы</a></li>
                    <li><a href="#">Какое-то меню</a></li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot.gif"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_right.png"/>
                    </li>
                </ul>
            </li>
            <li class="searchContainer">
                <div>
                <input type="text" id="searchField" />
                <img src="g_wimeo/magnifier.png" alt="Искать" title="Искать" />
                </div>
                <ul id="search">
                    <li>
                        <img class="corner_inset_left" alt="" src="g_wimeo/corner_inset_left.png"/>
                        <a href="#">Расширенный поиск</a>
                        <img class="corner_inset_right" alt="" src="g_wimeo/corner_inset_right.png"/>
                    </li>
                    <li class="last">
                        <img class="corner_left" alt="" src="g_wimeo/corner_left.png"/>
                        <img class="middle" alt="" src="g_wimeo/dot.gif"/>
                        <img class="corner_right" alt="" src="g_wimeo/corner_right.png"/>
                    </li>
                </ul>
            </li>
        </ul>
        <img style="float:left;" alt="" src="g_wimeo/g_menu_right.png"/>
    </div>
    <div style="float:none; clear:both;"></div>
    Я так делал всё криво и меню вертекальное!
    zqz, Aug 3, 2012
    #7

  8. tmb User


    Offline
    Message Count:
    151
    Likes Received:
    49
    My version of SE:
    3.20
    My version of phpFox:
    3.3.0
    стандартный код меню заменил? или просто добавил в tpl
    tmb, Aug 3, 2012
    #8

  9. zqz User


    Offline
    Message Count:
    230
    Likes Received:
    9
    My version of SE:
    3.16
    просто добавил но не чё не стал заменять!style не находит чёта!!!!! demo http://live.grin-siti.ru/id1
    zqz, Aug 3, 2012
    #9

  10. tmb User


    Offline
    Message Count:
    151
    Likes Received:
    49
    My version of SE:
    3.20
    My version of phpFox:
    3.3.0
    style просто добавь...и ищи код стандартного мню и заменяй етим кодом который вставил....
    tmb, Aug 3, 2012
    #10
Page 1 of 2

Share This Page

All rights reserved SocEngine.ru ©